From 0686b7077e17922c452c5ae1dcf759ba84bf5712 Mon Sep 17 00:00:00 2001
From: Samed <sbalcioglu@graphpolaris.com>
Date: Tue, 12 Nov 2024 11:36:21 +0000
Subject: [PATCH] fix: tablevis export icons
---
.../lib/components/buttons/buttons.module.scss | 8 +++++++-
.../components/buttons/buttons.module.scss.d.ts | 1 +
libs/shared/lib/components/pagination/index.tsx | 17 ++++++++++-------
.../tablevis/components/Table.tsx | 6 ++++--
.../vis/visualizations/tablevis/tablevis.tsx | 10 ++++++++--
5 files changed, 30 insertions(+), 12 deletions(-)
diff --git a/libs/shared/lib/components/buttons/buttons.module.scss b/libs/shared/lib/components/buttons/buttons.module.scss
index a348a6e10..4a522f089 100644
--- a/libs/shared/lib/components/buttons/buttons.module.scss
+++ b/libs/shared/lib/components/buttons/buttons.module.scss
@@ -20,7 +20,7 @@
}
padding: 0.25em 0.75em;
span {
- overflow: hidden;
+ overflow: visible;
text-overflow: ellipsis;
line-height: 1em;
}
@@ -144,3 +144,9 @@
.btn-rounded {
@apply rounded-full;
}
+
+.exported {
+ span {
+ transform: translate(0px, -8px);
+ }
+}
\ No newline at end of file
diff --git a/libs/shared/lib/components/buttons/buttons.module.scss.d.ts b/libs/shared/lib/components/buttons/buttons.module.scss.d.ts
index ac3cb0637..b34ab2c56 100644
--- a/libs/shared/lib/components/buttons/buttons.module.scss.d.ts
+++ b/libs/shared/lib/components/buttons/buttons.module.scss.d.ts
@@ -16,5 +16,6 @@ declare const classNames: {
readonly 'btn-ghost': 'btn-ghost';
readonly 'btn-block': 'btn-block';
readonly 'btn-rounded': 'btn-rounded';
+ readonly exported: 'exported';
};
export = classNames;
diff --git a/libs/shared/lib/components/pagination/index.tsx b/libs/shared/lib/components/pagination/index.tsx
index 4a0cf94aa..31439e258 100644
--- a/libs/shared/lib/components/pagination/index.tsx
+++ b/libs/shared/lib/components/pagination/index.tsx
@@ -36,15 +36,18 @@ export const Pagination: React.FC<PaginationProps> = ({
}
};
- const backIcon = arrangement === 'vertical' ? 'icon-[ic--baseline-arrow-upward]' : 'icon-[ic--baseline-arrow-back]';
- const forwardIcon = arrangement === 'vertical' ? 'icon-[ic--baseline-arrow-downward]' : 'icon-[ic--baseline-arrow-forward]';
-
+ const backIcon = <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+ <path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
+</svg>
+ const forwardIcon = <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+ <path fill="currentColor" d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
+</svg>
+
return (
- <div
- className={`self-center table-pagination flex flex-col items-center py-2 gap-1.5 ${arrangement === 'vertical' ? 'flex-col' : 'flex-row'} ${className}`}
- >
+ <div className={`self-center table-pagination flex flex-col items-center py-2 gap-1.5 ${className}`}>
<div className="inline-block text-sm">
- <span className="font-semibold">{`${firstItem} - ${numItemsArrayReal}`}</span> of {totalItems}
+ <span className="font-semibold">{`${firstItem} - ${firstItem + numItemsArrayReal - 1}`}</span>
+ <span className="ml-1">of {totalItems}</span>
</div>
<div className={`grid ${arrangement === 'vertical' ? 'grid-rows-3' : 'grid-cols-2'} gap-2`}>
<Button
diff --git a/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx b/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx
index a0c3a9852..76aed67e6 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx
@@ -307,8 +307,10 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
)
) : (
<div className="font-normal mx-auto flex flex-row items-start justify-center w-full gap-1 text-center text-secondary-700 p-1">
- <span className="text-2xs overflow-x-hidden truncate">Unique values:</span>
- <span className="text-xs shrink-0">{data2Render[index]?.numElements}</span>
+ <div className="flex items-center space-x-1 whitespace-nowrap">
+ <span className="text-2xs">Unique values:</span>
+ <span className="text-xs font-medium">{data2Render[index]?.numElements}</span>
+ </div>
</div>
))}
</div>
diff --git a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
index 761d3a517..71c00cac1 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
@@ -8,6 +8,7 @@ import html2canvas from 'html2canvas';
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import { VISComponentType, VisualizationPropTypes, VisualizationSettingsPropTypes } from '../../common';
import { AugmentedNodeAttributes, Table } from './components/Table';
+import styles from '../../../components/buttons/buttons.module.scss';
export interface TableVisHandle {
exportImageInternal: () => void;
@@ -110,8 +111,13 @@ export const TableVis = forwardRef<TableVisHandle, VisualizationPropTypes<TableP
const exportImageInternal = () => {
if (ref.current) {
- // Check if divRef.current is not null
- html2canvas(ref.current).then((canvas) => {
+ const clonedElement = ref.current.cloneNode(true) as HTMLDivElement;
+ clonedElement.classList.add(styles.exported);
+
+ document.body.appendChild(clonedElement);
+
+ html2canvas(clonedElement).then((canvas) => {
+ document.body.removeChild(clonedElement);
const pngData = canvas.toDataURL('image/png');
const a = document.createElement('a');
a.href = pngData;
--
GitLab