@apipass/design-system 4.2.1 → 4.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/embedded-styles.js +1 -1
- package/dist/lib/style.css +1 -1
- package/dist/lib/ui/components/DataTable/DataTable.cjs +1 -1
- package/dist/lib/ui/components/DataTable/DataTable.cjs.map +1 -1
- package/dist/lib/ui/components/DataTable/DataTable.js +118 -106
- package/dist/lib/ui/components/DataTable/DataTable.js.map +1 -1
- package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.cjs +1 -1
- package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.cjs.map +1 -1
- package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.js +66 -50
- package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.js.map +1 -1
- package/dist/lib/ui/primitives/Table/Table.cjs +1 -1
- package/dist/lib/ui/primitives/Table/Table.cjs.map +1 -1
- package/dist/lib/ui/primitives/Table/Table.js +43 -43
- package/dist/lib/ui/primitives/Table/Table.js.map +1 -1
- package/dist/types/ui/components/DataTable/DataTable.d.ts +10 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react");;/* empty css */const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react");;/* empty css */const K=require("../../primitives/Search/Search.cjs"),t=require("../../primitives/Table/Table.cjs"),ee=require("../../icons/IconChevronDown.cjs"),ae=require("../../icons/IconChevronRight.cjs"),se=require("../../primitives/Pagination/Pagination.cjs"),te=require("../../primitives/PermissionGate/PermissionGate.cjs"),le=require("../../layout/Flex/Flex.cjs");function ne({action:n,item:c}){const o=n.isAllowed!==!1,d=e.jsx("button",{className:"data-table-row-action-btn","aria-label":n.label,disabled:!o,onClick:o?()=>n.onPress(c):void 0,children:n.icon});return o?d:e.jsx(te.PermissionGate,{isAllowed:!1,noAccessLabel:n.noAccessLabel??"",children:d})}function R({columns:n,data:c,actions:o,rowActions:d,rowActionsLabel:L="",selectable:T=!1,selectedKeys:k,onSelectionChange:D,searchPlaceholder:I="Search...",searchKeys:g=[],isLoading:E=!1,loadingMessage:S="Loading...",emptyMessage:B="No records found",previousLabel:F="Previous",nextLabel:G="Next",pageSize:b=10,nestedColumns:v,getNestedData:P,nestedLoadingMessage:H="Loading...",nestedEmptyMessage:$="No records found",nestedSearchKeys:O,nestedSearchPlaceholder:Q,nestedActions:j,nestedPageSize:z}){const[p,J]=h.useState(""),[U,M]=h.useState(1),[V,W]=h.useState(new Set),[q,w]=h.useState(new Map),f=!!P&&!!v,m=!!d;function X(a){const s=a.id;W(r=>{const i=new Set(r);if(i.has(s))i.delete(s);else if(i.add(s),!q.has(s)){const l=P(a);l instanceof Promise?(w(u=>new Map(u).set(s,{status:"loading",data:[]})),l.then(u=>{w(A=>new Map(A).set(s,{status:"loaded",data:u}))})):w(u=>new Map(u).set(s,{status:"loaded",data:l}))}return i})}const x=g.length>0,Y=x||!!o,C=h.useMemo(()=>{if(!p.trim()||!x)return c;const a=p.toLowerCase();return c.filter(s=>g.some(r=>String(s[r]??"").toLowerCase().includes(a)))},[c,p,g,x]),y=Math.max(1,Math.ceil(C.length/b)),N=Math.min(U,y),Z=C.slice((N-1)*b,N*b);function _(a,s){return s.render?s.render(a):String(a[s.key]??"")}return e.jsxs(le.Flex,{direction:"column",gap:"300",className:"data-table",children:[Y&&e.jsxs("div",{className:"data-table-toolbar",children:[x&&e.jsx(K.Search,{placeholder:I,onSearch:a=>{J(a),M(1)},className:"data-table-search"}),o&&e.jsx("div",{className:"data-table-actions",children:o})]}),E?e.jsx("div",{role:"status","aria-live":"polite","aria-label":S,className:"data-table-status",children:S}):C.length===0?e.jsx("div",{role:"status",className:"data-table-status data-table-empty",children:B}):e.jsxs(t.Table,{grid:!0,selectionMode:T?"multiple":"none",selectedKeys:k,onSelectionChange:D,children:[e.jsxs(t.TableHead,{children:[f&&e.jsx(t.TableColumn,{className:"data-table-expand-col"}),n.map((a,s)=>e.jsx(t.TableColumn,{align:a.align,isRowHeader:s===0,children:a.label},String(a.key))),m&&e.jsx(t.TableColumn,{align:"right",className:"data-table-row-actions-col",children:L})]}),e.jsx(t.TableBody,{children:Z.flatMap(a=>{const s=V.has(a.id),r=q.get(a.id),i=[e.jsxs(t.TableRow,{id:a.id,children:[f&&e.jsx(t.TableCell,{className:"data-table-expand-cell",children:e.jsx("button",{className:"data-table-expand-btn","aria-label":s?"Collapse row":"Expand row","aria-expanded":s,onClick:()=>X(a),children:s?e.jsx(ee.IconChevronDown,{size:"16"}):e.jsx(ae.IconChevronRight,{size:"16"})})}),n.map(l=>e.jsx(t.TableCell,{align:l.align,children:_(a,l)},String(l.key))),m&&e.jsx(t.TableCell,{align:"right",className:"data-table-row-actions-cell",children:e.jsx("div",{className:"data-table-row-actions",children:(typeof d=="function"?d(a):d).map(l=>e.jsx(ne,{action:l,item:a},l.key))})})]},a.id)];return s&&i.push(e.jsx(t.TableRow,{id:`${a.id}-nested`,className:"data-table-nested-row",children:e.jsx(t.TableCell,{colSpan:n.length+(f?1:0)+(T?1:0)+(m?1:0),className:"data-table-nested-cell",children:e.jsx(R,{columns:v,data:(r==null?void 0:r.data)??[],isLoading:!r||r.status==="loading",loadingMessage:H,emptyMessage:$,searchKeys:O,searchPlaceholder:Q,actions:j==null?void 0:j(a),pageSize:z??b})})},`${a.id}-nested`)),i})})]}),e.jsx(se.Pagination,{page:N,totalPages:y,onPageChange:M,previousLabel:F,nextLabel:G})]})}exports.DataTable=R;
|
|
2
2
|
//# sourceMappingURL=DataTable.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.cjs","sources":["../../../../../src/ui/components/DataTable/DataTable.tsx"],"sourcesContent":["import {\n Pagination,\n PermissionGate,\n Search,\n Table,\n TableBody,\n TableCell,\n TableColumn,\n TableHead,\n TableRow,\n} from \"primitives\";\nimport { Flex } from \"layout\";\nimport { IconChevronDown, IconChevronRight } from \"icons\";\nimport type { ReactNode } from \"react\";\nimport { useMemo, useState } from \"react\";\nimport \"./datatable.css\";\n\nexport interface Column<T> {\n key: keyof T | string;\n label: string;\n align?: \"start\" | \"center\" | \"right\";\n render?: (item: T) => ReactNode;\n}\n\nexport interface RowActionDef<T> {\n /** Unique key for this action. */\n key: string;\n /** aria-label for the button. */\n label: string;\n /** Icon element rendered inside the button. */\n icon: ReactNode;\n /** When false, button is disabled and a tooltip with `noAccessLabel` is shown. Default: true. */\n isAllowed?: boolean;\n /** Tooltip text shown when `isAllowed` is false. */\n noAccessLabel?: string;\n /** Called with the row item when the button is pressed. */\n onPress: (item: T) => void;\n}\n\nfunction RowActionButton<T>({\n action,\n item,\n}: {\n action: RowActionDef<T>;\n item: T;\n}) {\n const allowed = action.isAllowed !== false;\n const btn = (\n <button\n className=\"data-table-row-action-btn\"\n aria-label={action.label}\n disabled={!allowed}\n onClick={allowed ? () => action.onPress(item) : undefined}\n >\n {action.icon}\n </button>\n );\n if (allowed) return btn;\n return (\n <PermissionGate isAllowed={false} noAccessLabel={action.noAccessLabel ?? \"\"}>\n {btn}\n </PermissionGate>\n );\n}\n\n// O tipo da linha aninhada é independente de T (não há relação genérica entre linha pai e linhas\n// filhas), então \"any\" é usado deliberadamente como fronteira de erasure de tipo.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype NestedStatus = { status: \"loading\"; data: never[] } | { status: \"loaded\"; data: any[] };\n\nexport interface DataTableProps<T extends { id: string }> {\n columns: Column<T>[];\n data: T[];\n actions?: ReactNode;\n /** Per-row action buttons rendered in a dedicated last column. */\n rowActions?: RowActionDef<T>[] | ((item: T) => RowActionDef<T>[]);\n /** Label for the row actions column header. Defaults to empty string. */\n rowActionsLabel?: string;\n searchPlaceholder?: string;\n searchKeys?: (keyof T)[];\n isLoading?: boolean;\n loadingMessage?: string;\n emptyMessage?: string;\n previousLabel?: string;\n nextLabel?: string;\n pageSize?: number;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- linha aninhada é de tipo independente de T\n nestedColumns?: Column<any>[];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- linha aninhada é de tipo independente de T\n getNestedData?: (item: T) => any[] | Promise<any[]>;\n nestedLoadingMessage?: string;\n nestedEmptyMessage?: string;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- linha aninhada é de tipo independente de T\n nestedSearchKeys?: (keyof any)[];\n nestedSearchPlaceholder?: string;\n nestedActions?: (item: T) => ReactNode;\n nestedPageSize?: number;\n}\n\nexport function DataTable<T extends { id: string }>({\n columns,\n data,\n actions,\n rowActions,\n rowActionsLabel = \"\",\n searchPlaceholder = \"Search...\",\n searchKeys = [],\n isLoading = false,\n loadingMessage = \"Loading...\",\n emptyMessage = \"No records found\",\n previousLabel = \"Previous\",\n nextLabel = \"Next\",\n pageSize = 10,\n nestedColumns,\n getNestedData,\n nestedLoadingMessage = \"Loading...\",\n nestedEmptyMessage = \"No records found\",\n nestedSearchKeys,\n nestedSearchPlaceholder,\n nestedActions,\n nestedPageSize,\n}: DataTableProps<T>) {\n const [query, setQuery] = useState(\"\");\n const [page, setPage] = useState(1);\n const [expanded, setExpanded] = useState<Set<string>>(new Set());\n const [nestedCache, setNestedCache] = useState<Map<string, NestedStatus>>(new Map());\n\n const hasNested = !!getNestedData && !!nestedColumns;\n const hasRowActions = !!rowActions;\n\n function toggleRow(item: T) {\n const id = item.id;\n setExpanded((prev) => {\n const next = new Set(prev);\n if (next.has(id)) {\n next.delete(id);\n } else {\n next.add(id);\n if (!nestedCache.has(id)) {\n const result = getNestedData!(item);\n if (result instanceof Promise) {\n setNestedCache((c) => new Map(c).set(id, { status: \"loading\", data: [] }));\n result.then((rows) => {\n setNestedCache((c) => new Map(c).set(id, { status: \"loaded\", data: rows }));\n });\n } else {\n setNestedCache((c) => new Map(c).set(id, { status: \"loaded\", data: result }));\n }\n }\n }\n return next;\n });\n }\n\n const hasSearch = searchKeys.length > 0;\n const hasToolbar = hasSearch || !!actions;\n\n const filtered = useMemo(() => {\n if (!query.trim() || !hasSearch) return data;\n const lower = query.toLowerCase();\n return data.filter((item) =>\n searchKeys.some((k) =>\n String(item[k] ?? \"\")\n .toLowerCase()\n .includes(lower),\n ),\n );\n }, [data, query, searchKeys, hasSearch]);\n\n const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));\n const currentPage = Math.min(page, totalPages);\n const pageData = filtered.slice(\n (currentPage - 1) * pageSize,\n currentPage * pageSize,\n );\n\n function getCell(item: T, col: Column<T>): ReactNode {\n if (col.render) return col.render(item);\n return String((item as Record<string, unknown>)[col.key as string] ?? \"\");\n }\n\n return (\n <Flex direction=\"column\" gap=\"300\" className=\"data-table\">\n {hasToolbar && (\n <div className=\"data-table-toolbar\">\n {hasSearch && (\n <Search\n placeholder={searchPlaceholder}\n onSearch={(v) => {\n setQuery(v);\n setPage(1);\n }}\n className=\"data-table-search\"\n />\n )}\n {actions && <div className=\"data-table-actions\">{actions}</div>}\n </div>\n )}\n\n {isLoading ? (\n <div\n role=\"status\"\n aria-live=\"polite\"\n aria-label={loadingMessage}\n className=\"data-table-status\"\n >\n {loadingMessage}\n </div>\n ) : filtered.length === 0 ? (\n <div role=\"status\" className=\"data-table-status data-table-empty\">\n {emptyMessage}\n </div>\n ) : (\n <Table grid>\n <TableHead>\n {hasNested && <TableColumn className=\"data-table-expand-col\" />}\n {columns.map((col, idx) => (\n <TableColumn\n key={String(col.key)}\n align={col.align}\n isRowHeader={idx === 0}\n >\n {col.label}\n </TableColumn>\n ))}\n {hasRowActions && (\n <TableColumn align=\"right\" className=\"data-table-row-actions-col\">\n {rowActionsLabel}\n </TableColumn>\n )}\n </TableHead>\n <TableBody>\n {pageData.flatMap((item) => {\n const isExpanded = expanded.has(item.id);\n const cached = nestedCache.get(item.id);\n const rows: ReactNode[] = [\n <TableRow key={item.id} id={item.id}>\n {hasNested && (\n <TableCell className=\"data-table-expand-cell\">\n <button\n className=\"data-table-expand-btn\"\n aria-label={isExpanded ? \"Collapse row\" : \"Expand row\"}\n aria-expanded={isExpanded}\n onClick={() => toggleRow(item)}\n >\n {isExpanded ? (\n <IconChevronDown size=\"16\" />\n ) : (\n <IconChevronRight size=\"16\" />\n )}\n </button>\n </TableCell>\n )}\n {columns.map((col) => (\n <TableCell key={String(col.key)} align={col.align}>\n {getCell(item, col)}\n </TableCell>\n ))}\n {hasRowActions && (\n <TableCell align=\"right\" className=\"data-table-row-actions-cell\">\n <div className=\"data-table-row-actions\">\n {(typeof rowActions === \"function\"\n ? rowActions(item)\n : rowActions!\n ).map((action) => (\n <RowActionButton key={action.key} action={action} item={item} />\n ))}\n </div>\n </TableCell>\n )}\n </TableRow>,\n ];\n if (isExpanded) {\n rows.push(\n <TableRow key={`${item.id}-nested`} id={`${item.id}-nested`} className=\"data-table-nested-row\">\n <TableCell\n colSpan={columns.length + 1 + (hasRowActions ? 1 : 0)}\n className=\"data-table-nested-cell\"\n >\n <DataTable\n columns={nestedColumns!}\n data={cached?.data ?? []}\n isLoading={!cached || cached.status === \"loading\"}\n loadingMessage={nestedLoadingMessage}\n emptyMessage={nestedEmptyMessage}\n searchKeys={nestedSearchKeys}\n searchPlaceholder={nestedSearchPlaceholder}\n actions={nestedActions?.(item)}\n pageSize={nestedPageSize ?? pageSize}\n />\n </TableCell>\n </TableRow>,\n );\n }\n return rows;\n })}\n </TableBody>\n </Table>\n )}\n\n <Pagination\n page={currentPage}\n totalPages={totalPages}\n onPageChange={setPage}\n previousLabel={previousLabel}\n nextLabel={nextLabel}\n />\n </Flex>\n );\n}\n"],"names":["RowActionButton","action","item","allowed","btn","jsx","PermissionGate","DataTable","columns","data","actions","rowActions","rowActionsLabel","searchPlaceholder","searchKeys","isLoading","loadingMessage","emptyMessage","previousLabel","nextLabel","pageSize","nestedColumns","getNestedData","nestedLoadingMessage","nestedEmptyMessage","nestedSearchKeys","nestedSearchPlaceholder","nestedActions","nestedPageSize","query","setQuery","useState","page","setPage","expanded","setExpanded","nestedCache","setNestedCache","hasNested","hasRowActions","toggleRow","id","prev","next","result","c","rows","hasSearch","hasToolbar","filtered","useMemo","lower","k","totalPages","currentPage","pageData","getCell","col","Flex","jsxs","Search","v","Table","TableHead","TableColumn","idx","TableBody","isExpanded","cached","TableRow","TableCell","IconChevronDown","IconChevronRight","Pagination"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DataTable.cjs","sources":["../../../../../src/ui/components/DataTable/DataTable.tsx"],"sourcesContent":["import {\n Pagination,\n PermissionGate,\n Search,\n Table,\n TableBody,\n TableCell,\n TableColumn,\n TableHead,\n TableRow,\n} from \"primitives\";\nimport { Flex } from \"layout\";\nimport { IconChevronDown, IconChevronRight } from \"icons\";\nimport type { ReactNode } from \"react\";\nimport { useMemo, useState } from \"react\";\nimport type { Selection } from \"react-aria-components\";\nimport \"./datatable.css\";\n\nexport interface Column<T> {\n key: keyof T | string;\n label: string;\n align?: \"start\" | \"center\" | \"right\";\n render?: (item: T) => ReactNode;\n}\n\nexport interface RowActionDef<T> {\n /** Unique key for this action. */\n key: string;\n /** aria-label for the button. */\n label: string;\n /** Icon element rendered inside the button. */\n icon: ReactNode;\n /** When false, button is disabled and a tooltip with `noAccessLabel` is shown. Default: true. */\n isAllowed?: boolean;\n /** Tooltip text shown when `isAllowed` is false. */\n noAccessLabel?: string;\n /** Called with the row item when the button is pressed. */\n onPress: (item: T) => void;\n}\n\nfunction RowActionButton<T>({\n action,\n item,\n}: {\n action: RowActionDef<T>;\n item: T;\n}) {\n const allowed = action.isAllowed !== false;\n const btn = (\n <button\n className=\"data-table-row-action-btn\"\n aria-label={action.label}\n disabled={!allowed}\n onClick={allowed ? () => action.onPress(item) : undefined}\n >\n {action.icon}\n </button>\n );\n if (allowed) return btn;\n return (\n <PermissionGate isAllowed={false} noAccessLabel={action.noAccessLabel ?? \"\"}>\n {btn}\n </PermissionGate>\n );\n}\n\n// O tipo da linha aninhada é independente de T (não há relação genérica entre linha pai e linhas\n// filhas), então \"any\" é usado deliberadamente como fronteira de erasure de tipo.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype NestedStatus = { status: \"loading\"; data: never[] } | { status: \"loaded\"; data: any[] };\n\nexport interface DataTableProps<T extends { id: string }> {\n columns: Column<T>[];\n data: T[];\n actions?: ReactNode;\n /** Per-row action buttons rendered in a dedicated last column. */\n rowActions?: RowActionDef<T>[] | ((item: T) => RowActionDef<T>[]);\n /** Label for the row actions column header. Defaults to empty string. */\n rowActionsLabel?: string;\n /**\n * When true, renders a checkbox column before the first data column — a per-row checkbox on\n * every row, plus a \"select all\" checkbox in the header. Off by default.\n */\n selectable?: boolean;\n /** Controlled selection state. Omit to let the table manage its own selection internally. */\n selectedKeys?: Selection;\n onSelectionChange?: (keys: Selection) => void;\n searchPlaceholder?: string;\n searchKeys?: (keyof T)[];\n isLoading?: boolean;\n loadingMessage?: string;\n emptyMessage?: string;\n previousLabel?: string;\n nextLabel?: string;\n pageSize?: number;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- linha aninhada é de tipo independente de T\n nestedColumns?: Column<any>[];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- linha aninhada é de tipo independente de T\n getNestedData?: (item: T) => any[] | Promise<any[]>;\n nestedLoadingMessage?: string;\n nestedEmptyMessage?: string;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- linha aninhada é de tipo independente de T\n nestedSearchKeys?: (keyof any)[];\n nestedSearchPlaceholder?: string;\n nestedActions?: (item: T) => ReactNode;\n nestedPageSize?: number;\n}\n\nexport function DataTable<T extends { id: string }>({\n columns,\n data,\n actions,\n rowActions,\n rowActionsLabel = \"\",\n selectable = false,\n selectedKeys,\n onSelectionChange,\n searchPlaceholder = \"Search...\",\n searchKeys = [],\n isLoading = false,\n loadingMessage = \"Loading...\",\n emptyMessage = \"No records found\",\n previousLabel = \"Previous\",\n nextLabel = \"Next\",\n pageSize = 10,\n nestedColumns,\n getNestedData,\n nestedLoadingMessage = \"Loading...\",\n nestedEmptyMessage = \"No records found\",\n nestedSearchKeys,\n nestedSearchPlaceholder,\n nestedActions,\n nestedPageSize,\n}: DataTableProps<T>) {\n const [query, setQuery] = useState(\"\");\n const [page, setPage] = useState(1);\n const [expanded, setExpanded] = useState<Set<string>>(new Set());\n const [nestedCache, setNestedCache] = useState<Map<string, NestedStatus>>(new Map());\n\n const hasNested = !!getNestedData && !!nestedColumns;\n const hasRowActions = !!rowActions;\n\n function toggleRow(item: T) {\n const id = item.id;\n setExpanded((prev) => {\n const next = new Set(prev);\n if (next.has(id)) {\n next.delete(id);\n } else {\n next.add(id);\n if (!nestedCache.has(id)) {\n const result = getNestedData!(item);\n if (result instanceof Promise) {\n setNestedCache((c) => new Map(c).set(id, { status: \"loading\", data: [] }));\n result.then((rows) => {\n setNestedCache((c) => new Map(c).set(id, { status: \"loaded\", data: rows }));\n });\n } else {\n setNestedCache((c) => new Map(c).set(id, { status: \"loaded\", data: result }));\n }\n }\n }\n return next;\n });\n }\n\n const hasSearch = searchKeys.length > 0;\n const hasToolbar = hasSearch || !!actions;\n\n const filtered = useMemo(() => {\n if (!query.trim() || !hasSearch) return data;\n const lower = query.toLowerCase();\n return data.filter((item) =>\n searchKeys.some((k) =>\n String(item[k] ?? \"\")\n .toLowerCase()\n .includes(lower),\n ),\n );\n }, [data, query, searchKeys, hasSearch]);\n\n const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));\n const currentPage = Math.min(page, totalPages);\n const pageData = filtered.slice(\n (currentPage - 1) * pageSize,\n currentPage * pageSize,\n );\n\n function getCell(item: T, col: Column<T>): ReactNode {\n if (col.render) return col.render(item);\n return String((item as Record<string, unknown>)[col.key as string] ?? \"\");\n }\n\n return (\n <Flex direction=\"column\" gap=\"300\" className=\"data-table\">\n {hasToolbar && (\n <div className=\"data-table-toolbar\">\n {hasSearch && (\n <Search\n placeholder={searchPlaceholder}\n onSearch={(v) => {\n setQuery(v);\n setPage(1);\n }}\n className=\"data-table-search\"\n />\n )}\n {actions && <div className=\"data-table-actions\">{actions}</div>}\n </div>\n )}\n\n {isLoading ? (\n <div\n role=\"status\"\n aria-live=\"polite\"\n aria-label={loadingMessage}\n className=\"data-table-status\"\n >\n {loadingMessage}\n </div>\n ) : filtered.length === 0 ? (\n <div role=\"status\" className=\"data-table-status data-table-empty\">\n {emptyMessage}\n </div>\n ) : (\n <Table\n grid\n selectionMode={selectable ? \"multiple\" : \"none\"}\n selectedKeys={selectedKeys}\n onSelectionChange={onSelectionChange}\n >\n <TableHead>\n {hasNested && <TableColumn className=\"data-table-expand-col\" />}\n {columns.map((col, idx) => (\n <TableColumn\n key={String(col.key)}\n align={col.align}\n isRowHeader={idx === 0}\n >\n {col.label}\n </TableColumn>\n ))}\n {hasRowActions && (\n <TableColumn align=\"right\" className=\"data-table-row-actions-col\">\n {rowActionsLabel}\n </TableColumn>\n )}\n </TableHead>\n <TableBody>\n {pageData.flatMap((item) => {\n const isExpanded = expanded.has(item.id);\n const cached = nestedCache.get(item.id);\n const rows: ReactNode[] = [\n <TableRow key={item.id} id={item.id}>\n {hasNested && (\n <TableCell className=\"data-table-expand-cell\">\n <button\n className=\"data-table-expand-btn\"\n aria-label={isExpanded ? \"Collapse row\" : \"Expand row\"}\n aria-expanded={isExpanded}\n onClick={() => toggleRow(item)}\n >\n {isExpanded ? (\n <IconChevronDown size=\"16\" />\n ) : (\n <IconChevronRight size=\"16\" />\n )}\n </button>\n </TableCell>\n )}\n {columns.map((col) => (\n <TableCell key={String(col.key)} align={col.align}>\n {getCell(item, col)}\n </TableCell>\n ))}\n {hasRowActions && (\n <TableCell align=\"right\" className=\"data-table-row-actions-cell\">\n <div className=\"data-table-row-actions\">\n {(typeof rowActions === \"function\"\n ? rowActions(item)\n : rowActions!\n ).map((action) => (\n <RowActionButton key={action.key} action={action} item={item} />\n ))}\n </div>\n </TableCell>\n )}\n </TableRow>,\n ];\n if (isExpanded) {\n rows.push(\n <TableRow key={`${item.id}-nested`} id={`${item.id}-nested`} className=\"data-table-nested-row\">\n <TableCell\n colSpan={\n columns.length +\n (hasNested ? 1 : 0) +\n (selectable ? 1 : 0) +\n (hasRowActions ? 1 : 0)\n }\n className=\"data-table-nested-cell\"\n >\n <DataTable\n columns={nestedColumns!}\n data={cached?.data ?? []}\n isLoading={!cached || cached.status === \"loading\"}\n loadingMessage={nestedLoadingMessage}\n emptyMessage={nestedEmptyMessage}\n searchKeys={nestedSearchKeys}\n searchPlaceholder={nestedSearchPlaceholder}\n actions={nestedActions?.(item)}\n pageSize={nestedPageSize ?? pageSize}\n />\n </TableCell>\n </TableRow>,\n );\n }\n return rows;\n })}\n </TableBody>\n </Table>\n )}\n\n <Pagination\n page={currentPage}\n totalPages={totalPages}\n onPageChange={setPage}\n previousLabel={previousLabel}\n nextLabel={nextLabel}\n />\n </Flex>\n );\n}\n"],"names":["RowActionButton","action","item","allowed","btn","jsx","PermissionGate","DataTable","columns","data","actions","rowActions","rowActionsLabel","selectable","selectedKeys","onSelectionChange","searchPlaceholder","searchKeys","isLoading","loadingMessage","emptyMessage","previousLabel","nextLabel","pageSize","nestedColumns","getNestedData","nestedLoadingMessage","nestedEmptyMessage","nestedSearchKeys","nestedSearchPlaceholder","nestedActions","nestedPageSize","query","setQuery","useState","page","setPage","expanded","setExpanded","nestedCache","setNestedCache","hasNested","hasRowActions","toggleRow","id","prev","next","result","c","rows","hasSearch","hasToolbar","filtered","useMemo","lower","k","totalPages","currentPage","pageData","getCell","col","Flex","jsxs","Search","v","Table","TableHead","TableColumn","idx","TableBody","isExpanded","cached","TableRow","TableCell","IconChevronDown","IconChevronRight","Pagination"],"mappings":"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"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsxs as h, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { useState as
|
|
2
|
+
import { useState as b, useMemo as ea } from "react";
|
|
3
3
|
/* empty css */
|
|
4
|
-
import { Search as
|
|
5
|
-
import { Table as
|
|
6
|
-
import { IconChevronDown as
|
|
7
|
-
import { IconChevronRight as
|
|
8
|
-
import { Pagination as
|
|
9
|
-
import { PermissionGate as
|
|
10
|
-
import { Flex as
|
|
11
|
-
function
|
|
4
|
+
import { Search as ta } from "../../primitives/Search/Search.js";
|
|
5
|
+
import { Table as la, TableHead as na, TableColumn as P, TableBody as sa, TableRow as j, TableCell as g } from "../../primitives/Table/Table.js";
|
|
6
|
+
import { IconChevronDown as ra } from "../../icons/IconChevronDown.js";
|
|
7
|
+
import { IconChevronRight as oa } from "../../icons/IconChevronRight.js";
|
|
8
|
+
import { Pagination as da } from "../../primitives/Pagination/Pagination.js";
|
|
9
|
+
import { PermissionGate as ia } from "../../primitives/PermissionGate/PermissionGate.js";
|
|
10
|
+
import { Flex as ca } from "../../layout/Flex/Flex.js";
|
|
11
|
+
function ha({
|
|
12
12
|
action: n,
|
|
13
13
|
item: i
|
|
14
14
|
}) {
|
|
@@ -22,154 +22,166 @@ function da({
|
|
|
22
22
|
children: n.icon
|
|
23
23
|
}
|
|
24
24
|
);
|
|
25
|
-
return r ? o : /* @__PURE__ */ e(
|
|
25
|
+
return r ? o : /* @__PURE__ */ e(ia, { isAllowed: !1, noAccessLabel: n.noAccessLabel ?? "", children: o });
|
|
26
26
|
}
|
|
27
|
-
function
|
|
27
|
+
function pa({
|
|
28
28
|
columns: n,
|
|
29
29
|
data: i,
|
|
30
30
|
actions: r,
|
|
31
31
|
rowActions: o,
|
|
32
|
-
rowActionsLabel:
|
|
33
|
-
|
|
32
|
+
rowActionsLabel: B = "",
|
|
33
|
+
selectable: S = !1,
|
|
34
|
+
selectedKeys: D,
|
|
35
|
+
onSelectionChange: H,
|
|
36
|
+
searchPlaceholder: I = "Search...",
|
|
34
37
|
searchKeys: m = [],
|
|
35
|
-
isLoading:
|
|
36
|
-
loadingMessage:
|
|
37
|
-
emptyMessage:
|
|
38
|
-
previousLabel:
|
|
39
|
-
nextLabel:
|
|
40
|
-
pageSize:
|
|
41
|
-
nestedColumns:
|
|
42
|
-
getNestedData:
|
|
43
|
-
nestedLoadingMessage:
|
|
44
|
-
nestedEmptyMessage:
|
|
45
|
-
nestedSearchKeys:
|
|
46
|
-
nestedSearchPlaceholder:
|
|
38
|
+
isLoading: $ = !1,
|
|
39
|
+
loadingMessage: y = "Loading...",
|
|
40
|
+
emptyMessage: q = "No records found",
|
|
41
|
+
previousLabel: F = "Previous",
|
|
42
|
+
nextLabel: G = "Next",
|
|
43
|
+
pageSize: p = 10,
|
|
44
|
+
nestedColumns: T,
|
|
45
|
+
getNestedData: L,
|
|
46
|
+
nestedLoadingMessage: Q = "Loading...",
|
|
47
|
+
nestedEmptyMessage: z = "No records found",
|
|
48
|
+
nestedSearchKeys: J,
|
|
49
|
+
nestedSearchPlaceholder: O,
|
|
47
50
|
nestedActions: f,
|
|
48
|
-
nestedPageSize:
|
|
51
|
+
nestedPageSize: U
|
|
49
52
|
}) {
|
|
50
|
-
const [w,
|
|
51
|
-
function
|
|
53
|
+
const [w, V] = b(""), [W, k] = b(1), [X, Y] = b(/* @__PURE__ */ new Set()), [R, N] = b(/* @__PURE__ */ new Map()), x = !!L && !!T, C = !!o;
|
|
54
|
+
function Z(a) {
|
|
52
55
|
const t = a.id;
|
|
53
|
-
|
|
56
|
+
Y((s) => {
|
|
54
57
|
const d = new Set(s);
|
|
55
58
|
if (d.has(t))
|
|
56
59
|
d.delete(t);
|
|
57
|
-
else if (d.add(t), !
|
|
58
|
-
const l =
|
|
60
|
+
else if (d.add(t), !R.has(t)) {
|
|
61
|
+
const l = L(a);
|
|
59
62
|
l instanceof Promise ? (N((c) => new Map(c).set(t, { status: "loading", data: [] })), l.then((c) => {
|
|
60
|
-
N((
|
|
63
|
+
N((aa) => new Map(aa).set(t, { status: "loaded", data: c }));
|
|
61
64
|
})) : N((c) => new Map(c).set(t, { status: "loaded", data: l }));
|
|
62
65
|
}
|
|
63
66
|
return d;
|
|
64
67
|
});
|
|
65
68
|
}
|
|
66
|
-
const
|
|
67
|
-
if (!w.trim() || !
|
|
69
|
+
const u = m.length > 0, _ = u || !!r, M = ea(() => {
|
|
70
|
+
if (!w.trim() || !u) return i;
|
|
68
71
|
const a = w.toLowerCase();
|
|
69
72
|
return i.filter(
|
|
70
73
|
(t) => m.some(
|
|
71
74
|
(s) => String(t[s] ?? "").toLowerCase().includes(a)
|
|
72
75
|
)
|
|
73
76
|
);
|
|
74
|
-
}, [i, w, m,
|
|
75
|
-
(v - 1) *
|
|
76
|
-
v *
|
|
77
|
+
}, [i, w, m, u]), E = Math.max(1, Math.ceil(M.length / p)), v = Math.min(W, E), A = M.slice(
|
|
78
|
+
(v - 1) * p,
|
|
79
|
+
v * p
|
|
77
80
|
);
|
|
78
|
-
function
|
|
81
|
+
function K(a, t) {
|
|
79
82
|
return t.render ? t.render(a) : String(a[t.key] ?? "");
|
|
80
83
|
}
|
|
81
|
-
return /* @__PURE__ */ h(
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
84
|
+
return /* @__PURE__ */ h(ca, { direction: "column", gap: "300", className: "data-table", children: [
|
|
85
|
+
_ && /* @__PURE__ */ h("div", { className: "data-table-toolbar", children: [
|
|
86
|
+
u && /* @__PURE__ */ e(
|
|
87
|
+
ta,
|
|
85
88
|
{
|
|
86
|
-
placeholder:
|
|
89
|
+
placeholder: I,
|
|
87
90
|
onSearch: (a) => {
|
|
88
|
-
|
|
91
|
+
V(a), k(1);
|
|
89
92
|
},
|
|
90
93
|
className: "data-table-search"
|
|
91
94
|
}
|
|
92
95
|
),
|
|
93
96
|
r && /* @__PURE__ */ e("div", { className: "data-table-actions", children: r })
|
|
94
97
|
] }),
|
|
95
|
-
|
|
98
|
+
$ ? /* @__PURE__ */ e(
|
|
96
99
|
"div",
|
|
97
100
|
{
|
|
98
101
|
role: "status",
|
|
99
102
|
"aria-live": "polite",
|
|
100
|
-
"aria-label":
|
|
103
|
+
"aria-label": y,
|
|
101
104
|
className: "data-table-status",
|
|
102
|
-
children:
|
|
105
|
+
children: y
|
|
103
106
|
}
|
|
104
|
-
) :
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
x && /* @__PURE__ */ e(M, { align: "right", className: "data-table-row-actions-col", children: j })
|
|
117
|
-
] }),
|
|
118
|
-
/* @__PURE__ */ e(ta, { children: Y.flatMap((a) => {
|
|
119
|
-
const t = U.has(a.id), s = L.get(a.id), d = [
|
|
120
|
-
/* @__PURE__ */ h(E, { id: a.id, children: [
|
|
121
|
-
k && /* @__PURE__ */ e(g, { className: "data-table-expand-cell", children: /* @__PURE__ */ e(
|
|
122
|
-
"button",
|
|
107
|
+
) : M.length === 0 ? /* @__PURE__ */ e("div", { role: "status", className: "data-table-status data-table-empty", children: q }) : /* @__PURE__ */ h(
|
|
108
|
+
la,
|
|
109
|
+
{
|
|
110
|
+
grid: !0,
|
|
111
|
+
selectionMode: S ? "multiple" : "none",
|
|
112
|
+
selectedKeys: D,
|
|
113
|
+
onSelectionChange: H,
|
|
114
|
+
children: [
|
|
115
|
+
/* @__PURE__ */ h(na, { children: [
|
|
116
|
+
x && /* @__PURE__ */ e(P, { className: "data-table-expand-col" }),
|
|
117
|
+
n.map((a, t) => /* @__PURE__ */ e(
|
|
118
|
+
P,
|
|
123
119
|
{
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
120
|
+
align: a.align,
|
|
121
|
+
isRowHeader: t === 0,
|
|
122
|
+
children: a.label
|
|
123
|
+
},
|
|
124
|
+
String(a.key)
|
|
125
|
+
)),
|
|
126
|
+
C && /* @__PURE__ */ e(P, { align: "right", className: "data-table-row-actions-col", children: B })
|
|
127
|
+
] }),
|
|
128
|
+
/* @__PURE__ */ e(sa, { children: A.flatMap((a) => {
|
|
129
|
+
const t = X.has(a.id), s = R.get(a.id), d = [
|
|
130
|
+
/* @__PURE__ */ h(j, { id: a.id, children: [
|
|
131
|
+
x && /* @__PURE__ */ e(g, { className: "data-table-expand-cell", children: /* @__PURE__ */ e(
|
|
132
|
+
"button",
|
|
133
|
+
{
|
|
134
|
+
className: "data-table-expand-btn",
|
|
135
|
+
"aria-label": t ? "Collapse row" : "Expand row",
|
|
136
|
+
"aria-expanded": t,
|
|
137
|
+
onClick: () => Z(a),
|
|
138
|
+
children: t ? /* @__PURE__ */ e(ra, { size: "16" }) : /* @__PURE__ */ e(oa, { size: "16" })
|
|
139
|
+
}
|
|
140
|
+
) }),
|
|
141
|
+
n.map((l) => /* @__PURE__ */ e(g, { align: l.align, children: K(a, l) }, String(l.key))),
|
|
142
|
+
C && /* @__PURE__ */ e(g, { align: "right", className: "data-table-row-actions-cell", children: /* @__PURE__ */ e("div", { className: "data-table-row-actions", children: (typeof o == "function" ? o(a) : o).map((l) => /* @__PURE__ */ e(ha, { action: l, item: a }, l.key)) }) })
|
|
143
|
+
] }, a.id)
|
|
144
|
+
];
|
|
145
|
+
return t && d.push(
|
|
146
|
+
/* @__PURE__ */ e(j, { id: `${a.id}-nested`, className: "data-table-nested-row", children: /* @__PURE__ */ e(
|
|
147
|
+
g,
|
|
143
148
|
{
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
149
|
+
colSpan: n.length + (x ? 1 : 0) + (S ? 1 : 0) + (C ? 1 : 0),
|
|
150
|
+
className: "data-table-nested-cell",
|
|
151
|
+
children: /* @__PURE__ */ e(
|
|
152
|
+
pa,
|
|
153
|
+
{
|
|
154
|
+
columns: T,
|
|
155
|
+
data: (s == null ? void 0 : s.data) ?? [],
|
|
156
|
+
isLoading: !s || s.status === "loading",
|
|
157
|
+
loadingMessage: Q,
|
|
158
|
+
emptyMessage: z,
|
|
159
|
+
searchKeys: J,
|
|
160
|
+
searchPlaceholder: O,
|
|
161
|
+
actions: f == null ? void 0 : f(a),
|
|
162
|
+
pageSize: U ?? p
|
|
163
|
+
}
|
|
164
|
+
)
|
|
153
165
|
}
|
|
154
|
-
)
|
|
155
|
-
|
|
156
|
-
) }
|
|
157
|
-
|
|
158
|
-
}
|
|
159
|
-
|
|
166
|
+
) }, `${a.id}-nested`)
|
|
167
|
+
), d;
|
|
168
|
+
}) })
|
|
169
|
+
]
|
|
170
|
+
}
|
|
171
|
+
),
|
|
160
172
|
/* @__PURE__ */ e(
|
|
161
|
-
|
|
173
|
+
da,
|
|
162
174
|
{
|
|
163
175
|
page: v,
|
|
164
|
-
totalPages:
|
|
165
|
-
onPageChange:
|
|
166
|
-
previousLabel:
|
|
167
|
-
nextLabel:
|
|
176
|
+
totalPages: E,
|
|
177
|
+
onPageChange: k,
|
|
178
|
+
previousLabel: F,
|
|
179
|
+
nextLabel: G
|
|
168
180
|
}
|
|
169
181
|
)
|
|
170
182
|
] });
|
|
171
183
|
}
|
|
172
184
|
export {
|
|
173
|
-
|
|
185
|
+
pa as DataTable
|
|
174
186
|
};
|
|
175
187
|
//# sourceMappingURL=DataTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.js","sources":["../../../../../src/ui/components/DataTable/DataTable.tsx"],"sourcesContent":["import {\n Pagination,\n PermissionGate,\n Search,\n Table,\n TableBody,\n TableCell,\n TableColumn,\n TableHead,\n TableRow,\n} from \"primitives\";\nimport { Flex } from \"layout\";\nimport { IconChevronDown, IconChevronRight } from \"icons\";\nimport type { ReactNode } from \"react\";\nimport { useMemo, useState } from \"react\";\nimport \"./datatable.css\";\n\nexport interface Column<T> {\n key: keyof T | string;\n label: string;\n align?: \"start\" | \"center\" | \"right\";\n render?: (item: T) => ReactNode;\n}\n\nexport interface RowActionDef<T> {\n /** Unique key for this action. */\n key: string;\n /** aria-label for the button. */\n label: string;\n /** Icon element rendered inside the button. */\n icon: ReactNode;\n /** When false, button is disabled and a tooltip with `noAccessLabel` is shown. Default: true. */\n isAllowed?: boolean;\n /** Tooltip text shown when `isAllowed` is false. */\n noAccessLabel?: string;\n /** Called with the row item when the button is pressed. */\n onPress: (item: T) => void;\n}\n\nfunction RowActionButton<T>({\n action,\n item,\n}: {\n action: RowActionDef<T>;\n item: T;\n}) {\n const allowed = action.isAllowed !== false;\n const btn = (\n <button\n className=\"data-table-row-action-btn\"\n aria-label={action.label}\n disabled={!allowed}\n onClick={allowed ? () => action.onPress(item) : undefined}\n >\n {action.icon}\n </button>\n );\n if (allowed) return btn;\n return (\n <PermissionGate isAllowed={false} noAccessLabel={action.noAccessLabel ?? \"\"}>\n {btn}\n </PermissionGate>\n );\n}\n\n// O tipo da linha aninhada é independente de T (não há relação genérica entre linha pai e linhas\n// filhas), então \"any\" é usado deliberadamente como fronteira de erasure de tipo.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype NestedStatus = { status: \"loading\"; data: never[] } | { status: \"loaded\"; data: any[] };\n\nexport interface DataTableProps<T extends { id: string }> {\n columns: Column<T>[];\n data: T[];\n actions?: ReactNode;\n /** Per-row action buttons rendered in a dedicated last column. */\n rowActions?: RowActionDef<T>[] | ((item: T) => RowActionDef<T>[]);\n /** Label for the row actions column header. Defaults to empty string. */\n rowActionsLabel?: string;\n searchPlaceholder?: string;\n searchKeys?: (keyof T)[];\n isLoading?: boolean;\n loadingMessage?: string;\n emptyMessage?: string;\n previousLabel?: string;\n nextLabel?: string;\n pageSize?: number;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- linha aninhada é de tipo independente de T\n nestedColumns?: Column<any>[];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- linha aninhada é de tipo independente de T\n getNestedData?: (item: T) => any[] | Promise<any[]>;\n nestedLoadingMessage?: string;\n nestedEmptyMessage?: string;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- linha aninhada é de tipo independente de T\n nestedSearchKeys?: (keyof any)[];\n nestedSearchPlaceholder?: string;\n nestedActions?: (item: T) => ReactNode;\n nestedPageSize?: number;\n}\n\nexport function DataTable<T extends { id: string }>({\n columns,\n data,\n actions,\n rowActions,\n rowActionsLabel = \"\",\n searchPlaceholder = \"Search...\",\n searchKeys = [],\n isLoading = false,\n loadingMessage = \"Loading...\",\n emptyMessage = \"No records found\",\n previousLabel = \"Previous\",\n nextLabel = \"Next\",\n pageSize = 10,\n nestedColumns,\n getNestedData,\n nestedLoadingMessage = \"Loading...\",\n nestedEmptyMessage = \"No records found\",\n nestedSearchKeys,\n nestedSearchPlaceholder,\n nestedActions,\n nestedPageSize,\n}: DataTableProps<T>) {\n const [query, setQuery] = useState(\"\");\n const [page, setPage] = useState(1);\n const [expanded, setExpanded] = useState<Set<string>>(new Set());\n const [nestedCache, setNestedCache] = useState<Map<string, NestedStatus>>(new Map());\n\n const hasNested = !!getNestedData && !!nestedColumns;\n const hasRowActions = !!rowActions;\n\n function toggleRow(item: T) {\n const id = item.id;\n setExpanded((prev) => {\n const next = new Set(prev);\n if (next.has(id)) {\n next.delete(id);\n } else {\n next.add(id);\n if (!nestedCache.has(id)) {\n const result = getNestedData!(item);\n if (result instanceof Promise) {\n setNestedCache((c) => new Map(c).set(id, { status: \"loading\", data: [] }));\n result.then((rows) => {\n setNestedCache((c) => new Map(c).set(id, { status: \"loaded\", data: rows }));\n });\n } else {\n setNestedCache((c) => new Map(c).set(id, { status: \"loaded\", data: result }));\n }\n }\n }\n return next;\n });\n }\n\n const hasSearch = searchKeys.length > 0;\n const hasToolbar = hasSearch || !!actions;\n\n const filtered = useMemo(() => {\n if (!query.trim() || !hasSearch) return data;\n const lower = query.toLowerCase();\n return data.filter((item) =>\n searchKeys.some((k) =>\n String(item[k] ?? \"\")\n .toLowerCase()\n .includes(lower),\n ),\n );\n }, [data, query, searchKeys, hasSearch]);\n\n const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));\n const currentPage = Math.min(page, totalPages);\n const pageData = filtered.slice(\n (currentPage - 1) * pageSize,\n currentPage * pageSize,\n );\n\n function getCell(item: T, col: Column<T>): ReactNode {\n if (col.render) return col.render(item);\n return String((item as Record<string, unknown>)[col.key as string] ?? \"\");\n }\n\n return (\n <Flex direction=\"column\" gap=\"300\" className=\"data-table\">\n {hasToolbar && (\n <div className=\"data-table-toolbar\">\n {hasSearch && (\n <Search\n placeholder={searchPlaceholder}\n onSearch={(v) => {\n setQuery(v);\n setPage(1);\n }}\n className=\"data-table-search\"\n />\n )}\n {actions && <div className=\"data-table-actions\">{actions}</div>}\n </div>\n )}\n\n {isLoading ? (\n <div\n role=\"status\"\n aria-live=\"polite\"\n aria-label={loadingMessage}\n className=\"data-table-status\"\n >\n {loadingMessage}\n </div>\n ) : filtered.length === 0 ? (\n <div role=\"status\" className=\"data-table-status data-table-empty\">\n {emptyMessage}\n </div>\n ) : (\n <Table grid>\n <TableHead>\n {hasNested && <TableColumn className=\"data-table-expand-col\" />}\n {columns.map((col, idx) => (\n <TableColumn\n key={String(col.key)}\n align={col.align}\n isRowHeader={idx === 0}\n >\n {col.label}\n </TableColumn>\n ))}\n {hasRowActions && (\n <TableColumn align=\"right\" className=\"data-table-row-actions-col\">\n {rowActionsLabel}\n </TableColumn>\n )}\n </TableHead>\n <TableBody>\n {pageData.flatMap((item) => {\n const isExpanded = expanded.has(item.id);\n const cached = nestedCache.get(item.id);\n const rows: ReactNode[] = [\n <TableRow key={item.id} id={item.id}>\n {hasNested && (\n <TableCell className=\"data-table-expand-cell\">\n <button\n className=\"data-table-expand-btn\"\n aria-label={isExpanded ? \"Collapse row\" : \"Expand row\"}\n aria-expanded={isExpanded}\n onClick={() => toggleRow(item)}\n >\n {isExpanded ? (\n <IconChevronDown size=\"16\" />\n ) : (\n <IconChevronRight size=\"16\" />\n )}\n </button>\n </TableCell>\n )}\n {columns.map((col) => (\n <TableCell key={String(col.key)} align={col.align}>\n {getCell(item, col)}\n </TableCell>\n ))}\n {hasRowActions && (\n <TableCell align=\"right\" className=\"data-table-row-actions-cell\">\n <div className=\"data-table-row-actions\">\n {(typeof rowActions === \"function\"\n ? rowActions(item)\n : rowActions!\n ).map((action) => (\n <RowActionButton key={action.key} action={action} item={item} />\n ))}\n </div>\n </TableCell>\n )}\n </TableRow>,\n ];\n if (isExpanded) {\n rows.push(\n <TableRow key={`${item.id}-nested`} id={`${item.id}-nested`} className=\"data-table-nested-row\">\n <TableCell\n colSpan={columns.length + 1 + (hasRowActions ? 1 : 0)}\n className=\"data-table-nested-cell\"\n >\n <DataTable\n columns={nestedColumns!}\n data={cached?.data ?? []}\n isLoading={!cached || cached.status === \"loading\"}\n loadingMessage={nestedLoadingMessage}\n emptyMessage={nestedEmptyMessage}\n searchKeys={nestedSearchKeys}\n searchPlaceholder={nestedSearchPlaceholder}\n actions={nestedActions?.(item)}\n pageSize={nestedPageSize ?? pageSize}\n />\n </TableCell>\n </TableRow>,\n );\n }\n return rows;\n })}\n </TableBody>\n </Table>\n )}\n\n <Pagination\n page={currentPage}\n totalPages={totalPages}\n onPageChange={setPage}\n previousLabel={previousLabel}\n nextLabel={nextLabel}\n />\n </Flex>\n );\n}\n"],"names":["RowActionButton","action","item","allowed","btn","jsx","PermissionGate","DataTable","columns","data","actions","rowActions","rowActionsLabel","searchPlaceholder","searchKeys","isLoading","loadingMessage","emptyMessage","previousLabel","nextLabel","pageSize","nestedColumns","getNestedData","nestedLoadingMessage","nestedEmptyMessage","nestedSearchKeys","nestedSearchPlaceholder","nestedActions","nestedPageSize","query","setQuery","useState","page","setPage","expanded","setExpanded","nestedCache","setNestedCache","hasNested","hasRowActions","toggleRow","id","prev","next","result","rows","c","hasSearch","hasToolbar","filtered","useMemo","lower","k","totalPages","currentPage","pageData","getCell","col","Flex","jsxs","Search","v","Table","TableHead","TableColumn","idx","TableBody","isExpanded","cached","TableRow","TableCell","IconChevronDown","IconChevronRight","Pagination"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DataTable.js","sources":["../../../../../src/ui/components/DataTable/DataTable.tsx"],"sourcesContent":["import {\n Pagination,\n PermissionGate,\n Search,\n Table,\n TableBody,\n TableCell,\n TableColumn,\n TableHead,\n TableRow,\n} from \"primitives\";\nimport { Flex } from \"layout\";\nimport { IconChevronDown, IconChevronRight } from \"icons\";\nimport type { ReactNode } from \"react\";\nimport { useMemo, useState } from \"react\";\nimport type { Selection } from \"react-aria-components\";\nimport \"./datatable.css\";\n\nexport interface Column<T> {\n key: keyof T | string;\n label: string;\n align?: \"start\" | \"center\" | \"right\";\n render?: (item: T) => ReactNode;\n}\n\nexport interface RowActionDef<T> {\n /** Unique key for this action. */\n key: string;\n /** aria-label for the button. */\n label: string;\n /** Icon element rendered inside the button. */\n icon: ReactNode;\n /** When false, button is disabled and a tooltip with `noAccessLabel` is shown. Default: true. */\n isAllowed?: boolean;\n /** Tooltip text shown when `isAllowed` is false. */\n noAccessLabel?: string;\n /** Called with the row item when the button is pressed. */\n onPress: (item: T) => void;\n}\n\nfunction RowActionButton<T>({\n action,\n item,\n}: {\n action: RowActionDef<T>;\n item: T;\n}) {\n const allowed = action.isAllowed !== false;\n const btn = (\n <button\n className=\"data-table-row-action-btn\"\n aria-label={action.label}\n disabled={!allowed}\n onClick={allowed ? () => action.onPress(item) : undefined}\n >\n {action.icon}\n </button>\n );\n if (allowed) return btn;\n return (\n <PermissionGate isAllowed={false} noAccessLabel={action.noAccessLabel ?? \"\"}>\n {btn}\n </PermissionGate>\n );\n}\n\n// O tipo da linha aninhada é independente de T (não há relação genérica entre linha pai e linhas\n// filhas), então \"any\" é usado deliberadamente como fronteira de erasure de tipo.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype NestedStatus = { status: \"loading\"; data: never[] } | { status: \"loaded\"; data: any[] };\n\nexport interface DataTableProps<T extends { id: string }> {\n columns: Column<T>[];\n data: T[];\n actions?: ReactNode;\n /** Per-row action buttons rendered in a dedicated last column. */\n rowActions?: RowActionDef<T>[] | ((item: T) => RowActionDef<T>[]);\n /** Label for the row actions column header. Defaults to empty string. */\n rowActionsLabel?: string;\n /**\n * When true, renders a checkbox column before the first data column — a per-row checkbox on\n * every row, plus a \"select all\" checkbox in the header. Off by default.\n */\n selectable?: boolean;\n /** Controlled selection state. Omit to let the table manage its own selection internally. */\n selectedKeys?: Selection;\n onSelectionChange?: (keys: Selection) => void;\n searchPlaceholder?: string;\n searchKeys?: (keyof T)[];\n isLoading?: boolean;\n loadingMessage?: string;\n emptyMessage?: string;\n previousLabel?: string;\n nextLabel?: string;\n pageSize?: number;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- linha aninhada é de tipo independente de T\n nestedColumns?: Column<any>[];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- linha aninhada é de tipo independente de T\n getNestedData?: (item: T) => any[] | Promise<any[]>;\n nestedLoadingMessage?: string;\n nestedEmptyMessage?: string;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- linha aninhada é de tipo independente de T\n nestedSearchKeys?: (keyof any)[];\n nestedSearchPlaceholder?: string;\n nestedActions?: (item: T) => ReactNode;\n nestedPageSize?: number;\n}\n\nexport function DataTable<T extends { id: string }>({\n columns,\n data,\n actions,\n rowActions,\n rowActionsLabel = \"\",\n selectable = false,\n selectedKeys,\n onSelectionChange,\n searchPlaceholder = \"Search...\",\n searchKeys = [],\n isLoading = false,\n loadingMessage = \"Loading...\",\n emptyMessage = \"No records found\",\n previousLabel = \"Previous\",\n nextLabel = \"Next\",\n pageSize = 10,\n nestedColumns,\n getNestedData,\n nestedLoadingMessage = \"Loading...\",\n nestedEmptyMessage = \"No records found\",\n nestedSearchKeys,\n nestedSearchPlaceholder,\n nestedActions,\n nestedPageSize,\n}: DataTableProps<T>) {\n const [query, setQuery] = useState(\"\");\n const [page, setPage] = useState(1);\n const [expanded, setExpanded] = useState<Set<string>>(new Set());\n const [nestedCache, setNestedCache] = useState<Map<string, NestedStatus>>(new Map());\n\n const hasNested = !!getNestedData && !!nestedColumns;\n const hasRowActions = !!rowActions;\n\n function toggleRow(item: T) {\n const id = item.id;\n setExpanded((prev) => {\n const next = new Set(prev);\n if (next.has(id)) {\n next.delete(id);\n } else {\n next.add(id);\n if (!nestedCache.has(id)) {\n const result = getNestedData!(item);\n if (result instanceof Promise) {\n setNestedCache((c) => new Map(c).set(id, { status: \"loading\", data: [] }));\n result.then((rows) => {\n setNestedCache((c) => new Map(c).set(id, { status: \"loaded\", data: rows }));\n });\n } else {\n setNestedCache((c) => new Map(c).set(id, { status: \"loaded\", data: result }));\n }\n }\n }\n return next;\n });\n }\n\n const hasSearch = searchKeys.length > 0;\n const hasToolbar = hasSearch || !!actions;\n\n const filtered = useMemo(() => {\n if (!query.trim() || !hasSearch) return data;\n const lower = query.toLowerCase();\n return data.filter((item) =>\n searchKeys.some((k) =>\n String(item[k] ?? \"\")\n .toLowerCase()\n .includes(lower),\n ),\n );\n }, [data, query, searchKeys, hasSearch]);\n\n const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));\n const currentPage = Math.min(page, totalPages);\n const pageData = filtered.slice(\n (currentPage - 1) * pageSize,\n currentPage * pageSize,\n );\n\n function getCell(item: T, col: Column<T>): ReactNode {\n if (col.render) return col.render(item);\n return String((item as Record<string, unknown>)[col.key as string] ?? \"\");\n }\n\n return (\n <Flex direction=\"column\" gap=\"300\" className=\"data-table\">\n {hasToolbar && (\n <div className=\"data-table-toolbar\">\n {hasSearch && (\n <Search\n placeholder={searchPlaceholder}\n onSearch={(v) => {\n setQuery(v);\n setPage(1);\n }}\n className=\"data-table-search\"\n />\n )}\n {actions && <div className=\"data-table-actions\">{actions}</div>}\n </div>\n )}\n\n {isLoading ? (\n <div\n role=\"status\"\n aria-live=\"polite\"\n aria-label={loadingMessage}\n className=\"data-table-status\"\n >\n {loadingMessage}\n </div>\n ) : filtered.length === 0 ? (\n <div role=\"status\" className=\"data-table-status data-table-empty\">\n {emptyMessage}\n </div>\n ) : (\n <Table\n grid\n selectionMode={selectable ? \"multiple\" : \"none\"}\n selectedKeys={selectedKeys}\n onSelectionChange={onSelectionChange}\n >\n <TableHead>\n {hasNested && <TableColumn className=\"data-table-expand-col\" />}\n {columns.map((col, idx) => (\n <TableColumn\n key={String(col.key)}\n align={col.align}\n isRowHeader={idx === 0}\n >\n {col.label}\n </TableColumn>\n ))}\n {hasRowActions && (\n <TableColumn align=\"right\" className=\"data-table-row-actions-col\">\n {rowActionsLabel}\n </TableColumn>\n )}\n </TableHead>\n <TableBody>\n {pageData.flatMap((item) => {\n const isExpanded = expanded.has(item.id);\n const cached = nestedCache.get(item.id);\n const rows: ReactNode[] = [\n <TableRow key={item.id} id={item.id}>\n {hasNested && (\n <TableCell className=\"data-table-expand-cell\">\n <button\n className=\"data-table-expand-btn\"\n aria-label={isExpanded ? \"Collapse row\" : \"Expand row\"}\n aria-expanded={isExpanded}\n onClick={() => toggleRow(item)}\n >\n {isExpanded ? (\n <IconChevronDown size=\"16\" />\n ) : (\n <IconChevronRight size=\"16\" />\n )}\n </button>\n </TableCell>\n )}\n {columns.map((col) => (\n <TableCell key={String(col.key)} align={col.align}>\n {getCell(item, col)}\n </TableCell>\n ))}\n {hasRowActions && (\n <TableCell align=\"right\" className=\"data-table-row-actions-cell\">\n <div className=\"data-table-row-actions\">\n {(typeof rowActions === \"function\"\n ? rowActions(item)\n : rowActions!\n ).map((action) => (\n <RowActionButton key={action.key} action={action} item={item} />\n ))}\n </div>\n </TableCell>\n )}\n </TableRow>,\n ];\n if (isExpanded) {\n rows.push(\n <TableRow key={`${item.id}-nested`} id={`${item.id}-nested`} className=\"data-table-nested-row\">\n <TableCell\n colSpan={\n columns.length +\n (hasNested ? 1 : 0) +\n (selectable ? 1 : 0) +\n (hasRowActions ? 1 : 0)\n }\n className=\"data-table-nested-cell\"\n >\n <DataTable\n columns={nestedColumns!}\n data={cached?.data ?? []}\n isLoading={!cached || cached.status === \"loading\"}\n loadingMessage={nestedLoadingMessage}\n emptyMessage={nestedEmptyMessage}\n searchKeys={nestedSearchKeys}\n searchPlaceholder={nestedSearchPlaceholder}\n actions={nestedActions?.(item)}\n pageSize={nestedPageSize ?? pageSize}\n />\n </TableCell>\n </TableRow>,\n );\n }\n return rows;\n })}\n </TableBody>\n </Table>\n )}\n\n <Pagination\n page={currentPage}\n totalPages={totalPages}\n onPageChange={setPage}\n previousLabel={previousLabel}\n nextLabel={nextLabel}\n />\n </Flex>\n );\n}\n"],"names":["RowActionButton","action","item","allowed","btn","jsx","PermissionGate","DataTable","columns","data","actions","rowActions","rowActionsLabel","selectable","selectedKeys","onSelectionChange","searchPlaceholder","searchKeys","isLoading","loadingMessage","emptyMessage","previousLabel","nextLabel","pageSize","nestedColumns","getNestedData","nestedLoadingMessage","nestedEmptyMessage","nestedSearchKeys","nestedSearchPlaceholder","nestedActions","nestedPageSize","query","setQuery","useState","page","setPage","expanded","setExpanded","nestedCache","setNestedCache","hasNested","hasRowActions","toggleRow","id","prev","next","result","rows","c","hasSearch","hasToolbar","filtered","useMemo","lower","k","totalPages","currentPage","pageData","getCell","col","Flex","jsxs","Search","v","Table","TableHead","TableColumn","idx","TableBody","isExpanded","cached","TableRow","TableCell","IconChevronDown","IconChevronRight","Pagination"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=32,n={top:16,right:16,bottom:24,left:56},f=6,y=.15,L={thin:1,normal:2,thick:4},g="solid",b="normal",h=new Intl.DateTimeFormat(void 0,{year:"numeric"}),p=new Intl.DateTimeFormat(void 0,{day:"2-digit",month:"2-digit"}),S=new Intl.DateTimeFormat(void 0,{hour:"2-digit",minute:"2-digit",hour12:!1}),E=new Intl.DateTimeFormat(void 0,{hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:!1});function T(o){const e=new Date(o);return e.getSeconds()!==0||e.getMilliseconds()!==0?E.format(e):e.getHours()!==0||e.getMinutes()!==0?S.format(e):e.getMonth()===0&&e.getDate()===1?h.format(e):p.format(e)}function c(o){const{valueFormatter:e}=o;if(e)return i=>i===null?"":e(i)}function C(o){const{showValueLabels:e,theme:i}=o,l=c(o);return{show:e,position:"top",color:i.labelColor,formatter:l?t=>l(t.value[1]):void 0}}function x(o,e,i){const l=o.points.map(r=>[r.timestamp,r.value]),t=C(e);return e.displayType==="bar"?{id:o.id,name:o.name,type:"bar",data:l,itemStyle:{color:i},label:t}:{id:o.id,name:o.name,type:"line",data:l,showSymbol:e.showSymbols,symbolSize:f,lineStyle:{color:i,type:e.line.style??g,width:L[e.line.width??b]},itemStyle:{color:i},areaStyle:e.displayType==="area"?{color:i,opacity:y}:void 0,label:t}}function _(o){const{series:e,legend:i,yAxis:l,theme:t,seriesColorOverrides:r}=o,s=i!=="none"&&e.length>0,a=c(o);return{animation:!1,color:t.seriesColors,textStyle:{fontFamily:t.fontFamily,color:t.labelColor},grid:{...n,top:s?n.top+u:n.top,containLabel:!1},legend:s?{type:"scroll",top:0,left:0,icon:"roundRect",itemHeight:8,itemWidth:12,textStyle:{color:t.labelColor}}:{show:!1},tooltip:{trigger:"axis",backgroundColor:t.tooltipBackgroundColor,borderColor:t.tooltipBorderColor,textStyle:{color:t.labelColor},valueFormatter:a},xAxis:{type:"time",axisLine:{lineStyle:{color:t.axisLineColor}},axisTick:{show:!1},axisLabel:{color:t.labelColor,hideOverlap:!0,formatter:T},splitLine:{show:!1}},yAxis:{type:l.scale==="log"?"log":"value",scale:l.includeZero!==!0,min:l.min,max:l.max,axisLine:{show:!1},axisLabel:{color:t.labelColor,formatter:a},splitLine:{lineStyle:{color:t.splitLineColor}}},series:e.map((m,d)=>x(m,o,r[m.id]??t.seriesColors[d%t.seriesColors.length]))}}exports.buildTimeSeriesOption=_;
|
|
2
2
|
//# sourceMappingURL=time-series-option.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"time-series-option.cjs","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/time-series-option.ts"],"sourcesContent":["import type { ChartTheme } from \"../chart-theme\";\n\nexport interface TimeSeriesPoint {\n timestamp: number;\n value: number | null;\n}\n\nexport interface TimeSeriesData {\n id: string;\n name: string;\n points: TimeSeriesPoint[];\n // Nome de token, nunca hex: é o que mantém a cor válida nos dois temas. Sem ele a série\n // recebe a próxima cor da paleta.\n colorToken?: string;\n}\n\nexport type TimeSeriesDisplayType = \"line\" | \"bar\" | \"area\";\n\nexport type TimeSeriesLineStyle = \"solid\" | \"dashed\" | \"dotted\";\n\nexport type TimeSeriesLineWidth = \"thin\" | \"normal\" | \"thick\";\n\nexport interface TimeSeriesLineOptions {\n style?: TimeSeriesLineStyle;\n width?: TimeSeriesLineWidth;\n}\n\nexport type TimeSeriesLegendMode = \"inline\" | \"none\";\n\nexport type TimeSeriesAxisScale = \"linear\" | \"log\";\n\nexport interface TimeSeriesYAxisOptions {\n scale?: TimeSeriesAxisScale;\n min?: number;\n max?: number;\n includeZero?: boolean;\n}\n\nexport interface TimeSeriesOptionInput {\n series: TimeSeriesData[];\n displayType: TimeSeriesDisplayType;\n legend: TimeSeriesLegendMode;\n line: TimeSeriesLineOptions;\n yAxis: TimeSeriesYAxisOptions;\n theme: ChartTheme;\n showSymbols: boolean;\n showValueLabels: boolean;\n seriesColorOverrides: Record<string, string>;\n valueFormatter?: (value: number) => string;\n}\n\nconst LEGEND_HEIGHT_PX: number = 32;\n\nconst GRID_WITHOUT_LEGEND = { top: 16, right: 16, bottom: 24, left: 56 } as const;\n\nconst SYMBOL_SIZE_PX: number = 6;\n\nconst AREA_OPACITY: number = 0.15;\n\nconst LINE_WIDTH_PX: Record<TimeSeriesLineWidth, number> = { thin: 1, normal: 2, thick: 4 };\n\nconst DEFAULT_LINE_STYLE: TimeSeriesLineStyle = \"solid\";\n\nconst DEFAULT_LINE_WIDTH: TimeSeriesLineWidth = \"normal\";\n\n// O ponto de gap chega ao formatter como `null` — o ECharts monta o bloco do tooltip sem marcar\n// `noValue`, então formata o vazio junto com o resto. O tipo público promete `number` ao\n// consumidor, e é esta guarda que mantém a promessa em vez de transformá-la em aviso.\nfunction nullSafeValueFormatter(\n input: TimeSeriesOptionInput,\n): ((value: number | null) => string) | undefined {\n const { valueFormatter } = input;\n if (!valueFormatter) return undefined;\n return (value: number | null) => (value === null ? \"\" : valueFormatter(value));\n}\n\nfunction seriesLabel(input: TimeSeriesOptionInput): Record<string, unknown> {\n const { showValueLabels, theme } = input;\n const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n return {\n show: showValueLabels,\n position: \"top\",\n color: theme.labelColor,\n formatter: formatValue\n ? (params: { value: [number, number | null] }) => formatValue(params.value[1])\n : undefined,\n };\n}\n\nfunction seriesEntry(\n data: TimeSeriesData,\n input: TimeSeriesOptionInput,\n color: string,\n): Record<string, unknown> {\n const values: Array<[number, number | null]> = data.points.map((point: TimeSeriesPoint) => [\n point.timestamp,\n point.value,\n ]);\n const label: Record<string, unknown> = seriesLabel(input);\n\n if (input.displayType === \"bar\") {\n return { id: data.id, name: data.name, type: \"bar\", data: values, itemStyle: { color }, label };\n }\n\n return {\n id: data.id,\n name: data.name,\n type: \"line\",\n data: values,\n showSymbol: input.showSymbols,\n symbolSize: SYMBOL_SIZE_PX,\n lineStyle: {\n color,\n type: input.line.style ?? DEFAULT_LINE_STYLE,\n width: LINE_WIDTH_PX[input.line.width ?? DEFAULT_LINE_WIDTH],\n },\n itemStyle: { color },\n areaStyle: input.displayType === \"area\" ? { color, opacity: AREA_OPACITY } : undefined,\n label,\n };\n}\n\n// O retorno é `Record<string, unknown>` de propósito, e não `EChartsOption`: é o que impede\n// um tipo da biblioteca de vazar para o resto do design system.\nexport function buildTimeSeriesOption(input: TimeSeriesOptionInput): Record<string, unknown> {\n const { series, legend, yAxis, theme, seriesColorOverrides } = input;\n const isLegendVisible: boolean = legend !== \"none\" && series.length > 0;\n const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n\n return {\n animation: false,\n color: theme.seriesColors,\n textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n grid: {\n ...GRID_WITHOUT_LEGEND,\n top: isLegendVisible ? GRID_WITHOUT_LEGEND.top + LEGEND_HEIGHT_PX : GRID_WITHOUT_LEGEND.top,\n containLabel: false,\n },\n legend: isLegendVisible\n ? {\n type: \"scroll\",\n top: 0,\n left: 0,\n icon: \"roundRect\",\n itemHeight: 8,\n itemWidth: 12,\n textStyle: { color: theme.labelColor },\n }\n : { show: false },\n tooltip: {\n trigger: \"axis\",\n backgroundColor: theme.tooltipBackgroundColor,\n borderColor: theme.tooltipBorderColor,\n textStyle: { color: theme.labelColor },\n valueFormatter: formatValue,\n },\n xAxis: {\n type: \"time\",\n axisLine: { lineStyle: { color: theme.axisLineColor } },\n axisTick: { show: false },\n axisLabel: { color: theme.labelColor, hideOverlap: true },\n splitLine: { show: false },\n },\n yAxis: {\n type: yAxis.scale === \"log\" ? \"log\" : \"value\",\n scale: yAxis.includeZero !== true,\n min: yAxis.min,\n max: yAxis.max,\n axisLine: { show: false },\n axisLabel: { color: theme.labelColor, formatter: formatValue },\n splitLine: { lineStyle: { color: theme.splitLineColor } },\n },\n series: series.map((data: TimeSeriesData, index: number) =>\n seriesEntry(\n data,\n input,\n seriesColorOverrides[data.id] ?? theme.seriesColors[index % theme.seriesColors.length],\n ),\n ),\n };\n}\n"],"names":["LEGEND_HEIGHT_PX","GRID_WITHOUT_LEGEND","SYMBOL_SIZE_PX","AREA_OPACITY","LINE_WIDTH_PX","DEFAULT_LINE_STYLE","DEFAULT_LINE_WIDTH","nullSafeValueFormatter","input","valueFormatter","value","seriesLabel","showValueLabels","theme","formatValue","params","seriesEntry","data","color","values","point","label","buildTimeSeriesOption","series","legend","yAxis","seriesColorOverrides","isLegendVisible","index"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"time-series-option.cjs","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/time-series-option.ts"],"sourcesContent":["import type { ChartTheme } from \"../chart-theme\";\n\nexport interface TimeSeriesPoint {\n timestamp: number;\n value: number | null;\n}\n\nexport interface TimeSeriesData {\n id: string;\n name: string;\n points: TimeSeriesPoint[];\n // Nome de token, nunca hex: é o que mantém a cor válida nos dois temas. Sem ele a série\n // recebe a próxima cor da paleta.\n colorToken?: string;\n}\n\nexport type TimeSeriesDisplayType = \"line\" | \"bar\" | \"area\";\n\nexport type TimeSeriesLineStyle = \"solid\" | \"dashed\" | \"dotted\";\n\nexport type TimeSeriesLineWidth = \"thin\" | \"normal\" | \"thick\";\n\nexport interface TimeSeriesLineOptions {\n style?: TimeSeriesLineStyle;\n width?: TimeSeriesLineWidth;\n}\n\nexport type TimeSeriesLegendMode = \"inline\" | \"none\";\n\nexport type TimeSeriesAxisScale = \"linear\" | \"log\";\n\nexport interface TimeSeriesYAxisOptions {\n scale?: TimeSeriesAxisScale;\n min?: number;\n max?: number;\n includeZero?: boolean;\n}\n\nexport interface TimeSeriesOptionInput {\n series: TimeSeriesData[];\n displayType: TimeSeriesDisplayType;\n legend: TimeSeriesLegendMode;\n line: TimeSeriesLineOptions;\n yAxis: TimeSeriesYAxisOptions;\n theme: ChartTheme;\n showSymbols: boolean;\n showValueLabels: boolean;\n seriesColorOverrides: Record<string, string>;\n valueFormatter?: (value: number) => string;\n}\n\nconst LEGEND_HEIGHT_PX: number = 32;\n\nconst GRID_WITHOUT_LEGEND = { top: 16, right: 16, bottom: 24, left: 56 } as const;\n\nconst SYMBOL_SIZE_PX: number = 6;\n\nconst AREA_OPACITY: number = 0.15;\n\nconst LINE_WIDTH_PX: Record<TimeSeriesLineWidth, number> = { thin: 1, normal: 2, thick: 4 };\n\nconst DEFAULT_LINE_STYLE: TimeSeriesLineStyle = \"solid\";\n\nconst DEFAULT_LINE_WIDTH: TimeSeriesLineWidth = \"normal\";\n\n// O eixo de tempo do ECharts rotula a marca de dia so com o numero do dia -- \"2\", \"3\", \"4\" --, que\n// sozinho nao diz nem o mes. Aqui a marca de dia vira data e a marca dentro do dia vira hora, que e\n// o que se espera de uma serie temporal.\n//\n// A precisao sai do proprio instante, e nao de um nivel pedido ao ECharts: ele alinha as marcas ao\n// nivel que cabe no eixo, entao meia-noite e marca de dia, minuto cheio e marca de hora, e assim por\n// diante. Ler o instante e o que permite usar `Intl` e escrever a data na convencao de quem le -- o\n// objeto de niveis do ECharts so aceita template, e um `{dd}/{MM}` fixo seria lido como mes/dia por\n// metade dos usuarios.\nconst YEAR_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, { year: \"numeric\" });\n\nconst DAY_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n day: \"2-digit\",\n month: \"2-digit\",\n});\n\nconst MINUTE_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n hour: \"2-digit\",\n minute: \"2-digit\",\n hour12: false,\n});\n\nconst SECOND_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n hour: \"2-digit\",\n minute: \"2-digit\",\n second: \"2-digit\",\n hour12: false,\n});\n\nfunction timeAxisLabel(timestamp: number): string {\n const instant: Date = new Date(timestamp);\n if (instant.getSeconds() !== 0 || instant.getMilliseconds() !== 0) return SECOND_LABEL.format(instant);\n if (instant.getHours() !== 0 || instant.getMinutes() !== 0) return MINUTE_LABEL.format(instant);\n // Primeiro de janeiro e a marca de ano do ECharts, e ali a data sem o ano nao situa ninguem.\n if (instant.getMonth() === 0 && instant.getDate() === 1) return YEAR_LABEL.format(instant);\n return DAY_LABEL.format(instant);\n}\n\n// O ponto de gap chega ao formatter como `null` — o ECharts monta o bloco do tooltip sem marcar\n// `noValue`, então formata o vazio junto com o resto. O tipo público promete `number` ao\n// consumidor, e é esta guarda que mantém a promessa em vez de transformá-la em aviso.\nfunction nullSafeValueFormatter(\n input: TimeSeriesOptionInput,\n): ((value: number | null) => string) | undefined {\n const { valueFormatter } = input;\n if (!valueFormatter) return undefined;\n return (value: number | null) => (value === null ? \"\" : valueFormatter(value));\n}\n\nfunction seriesLabel(input: TimeSeriesOptionInput): Record<string, unknown> {\n const { showValueLabels, theme } = input;\n const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n return {\n show: showValueLabels,\n position: \"top\",\n color: theme.labelColor,\n formatter: formatValue\n ? (params: { value: [number, number | null] }) => formatValue(params.value[1])\n : undefined,\n };\n}\n\nfunction seriesEntry(\n data: TimeSeriesData,\n input: TimeSeriesOptionInput,\n color: string,\n): Record<string, unknown> {\n const values: Array<[number, number | null]> = data.points.map((point: TimeSeriesPoint) => [\n point.timestamp,\n point.value,\n ]);\n const label: Record<string, unknown> = seriesLabel(input);\n\n if (input.displayType === \"bar\") {\n return { id: data.id, name: data.name, type: \"bar\", data: values, itemStyle: { color }, label };\n }\n\n return {\n id: data.id,\n name: data.name,\n type: \"line\",\n data: values,\n showSymbol: input.showSymbols,\n symbolSize: SYMBOL_SIZE_PX,\n lineStyle: {\n color,\n type: input.line.style ?? DEFAULT_LINE_STYLE,\n width: LINE_WIDTH_PX[input.line.width ?? DEFAULT_LINE_WIDTH],\n },\n itemStyle: { color },\n areaStyle: input.displayType === \"area\" ? { color, opacity: AREA_OPACITY } : undefined,\n label,\n };\n}\n\n// O retorno é `Record<string, unknown>` de propósito, e não `EChartsOption`: é o que impede\n// um tipo da biblioteca de vazar para o resto do design system.\nexport function buildTimeSeriesOption(input: TimeSeriesOptionInput): Record<string, unknown> {\n const { series, legend, yAxis, theme, seriesColorOverrides } = input;\n const isLegendVisible: boolean = legend !== \"none\" && series.length > 0;\n const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n\n return {\n animation: false,\n color: theme.seriesColors,\n textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n grid: {\n ...GRID_WITHOUT_LEGEND,\n top: isLegendVisible ? GRID_WITHOUT_LEGEND.top + LEGEND_HEIGHT_PX : GRID_WITHOUT_LEGEND.top,\n containLabel: false,\n },\n legend: isLegendVisible\n ? {\n type: \"scroll\",\n top: 0,\n left: 0,\n icon: \"roundRect\",\n itemHeight: 8,\n itemWidth: 12,\n textStyle: { color: theme.labelColor },\n }\n : { show: false },\n tooltip: {\n trigger: \"axis\",\n backgroundColor: theme.tooltipBackgroundColor,\n borderColor: theme.tooltipBorderColor,\n textStyle: { color: theme.labelColor },\n valueFormatter: formatValue,\n },\n xAxis: {\n type: \"time\",\n axisLine: { lineStyle: { color: theme.axisLineColor } },\n axisTick: { show: false },\n axisLabel: { color: theme.labelColor, hideOverlap: true, formatter: timeAxisLabel },\n splitLine: { show: false },\n },\n yAxis: {\n type: yAxis.scale === \"log\" ? \"log\" : \"value\",\n scale: yAxis.includeZero !== true,\n min: yAxis.min,\n max: yAxis.max,\n axisLine: { show: false },\n axisLabel: { color: theme.labelColor, formatter: formatValue },\n splitLine: { lineStyle: { color: theme.splitLineColor } },\n },\n series: series.map((data: TimeSeriesData, index: number) =>\n seriesEntry(\n data,\n input,\n seriesColorOverrides[data.id] ?? theme.seriesColors[index % theme.seriesColors.length],\n ),\n ),\n };\n}\n"],"names":["LEGEND_HEIGHT_PX","GRID_WITHOUT_LEGEND","SYMBOL_SIZE_PX","AREA_OPACITY","LINE_WIDTH_PX","DEFAULT_LINE_STYLE","DEFAULT_LINE_WIDTH","YEAR_LABEL","DAY_LABEL","MINUTE_LABEL","SECOND_LABEL","timeAxisLabel","timestamp","instant","nullSafeValueFormatter","input","valueFormatter","value","seriesLabel","showValueLabels","theme","formatValue","params","seriesEntry","data","color","values","point","label","buildTimeSeriesOption","series","legend","yAxis","seriesColorOverrides","isLegendVisible","index"],"mappings":"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"}
|