Elgato_dark/hyperdx
1
0
Fork 0
mirror of https://github.com/hyperdxio/hyperdx synced 2026-04-21 13:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Allow exporting table results as CSV (#347)

Browse source 
<img width="590" alt="image" src="https://github.com/hyperdxio/hyperdx/assets/2781687/f71acd7e-53d2-4eab-baaa-5e9074013325">
<img width="327" alt="image" src="https://github.com/hyperdxio/hyperdx/assets/2781687/211b6594-09e1-4c92-861a-6e97f95a5dbb">
This commit is contained in:
Mike Shi 2024-03-22 01:03:20 -07:00 committed by GitHub
parent eefe597430
commit 2c61276172
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 41 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/rare-avocados-fry.md Normal file
View file

@ -0,0 +1,5 @@
---
'@hyperdx/app': patch
---
Allow exporting table chart results as CSV

8
package.json
View file

@ -18,6 +18,12 @@
"prepare": "husky install"
},
"lint-staged": {
"**/*": "prettier --write --ignore-unknown"
"**/*.{js,jsx,ts,tsx}": [
"prettier --write --ignore-unknown",
"eslint --fix"
],
"**/*.{mdx,json,yml}": [
"prettier --write --ignore-unknown"
]
}
}

29
packages/app/src/HDXMultiSeriesTableChart.tsx
View file

@ -1,5 +1,6 @@
import { memo, useCallback, useMemo, useRef } from 'react';
import Link from 'next/link';
import { CSVLink } from 'react-csv';
import { Flex, Text } from '@mantine/core';
import {
flexRender,
@ -155,6 +156,18 @@ const Table = ({
[items, rowVirtualizer.options.scrollMargin, totalSize],
);
const csvData = useMemo(() => {
return data.map(row => {
const csvRow: { [key: string]: string } = {
[groupColumnName]: row.group,
};
columns.forEach(({ displayName, dataKey }) => {
csvRow[displayName] = row[dataKey];
});
return csvRow;
});
}, [data, columns, groupColumnName]);
return (
<div
className="overflow-auto h-100 fs-8 bg-inherit"
@ -229,6 +242,22 @@ const Table = ({
<i className="bi bi-three-dots-vertical" />
</div>
)}
{headerIndex === headerGroup.headers.length - 1 && (
<div className="d-flex align-items-center">
<CSVLink
data={csvData}
filename={`HyperDX_table_results`}
>
<div
className="fs-8 text-muted-hover ms-2"
role="button"
title="Download table as CSV"
>
<i className="bi bi-download" />
</div>
</CSVLink>
</div>
)}
</Flex>
</Flex>
)}