Skip to content
Snippets Groups Projects
Commit 8194a1b3 authored by Leonardo's avatar Leonardo
Browse files

fix(vis): paohvis color by class

parent 408441c1
No related branches found
No related tags found
1 merge request!153feat: update headers style, manage text overflow and sliders to config
Hide whitespace changes
Inline Side-by-side
libs/shared/lib/vis/visualizations/paohvis/components/CustomLine.tsx
+ 6
− 8
View file @ 8194a1b3
......@@ -6,19 +6,17 @@ interface LineProps {
y1: number;
y2: number;
strokeWidth: number;
fill: string;
fill?: string;
className?: string;
}
export const CustomLine: React.FC<LineProps> = (props) => {
return (
<line
x1={props.x1}
x2={props.x2}
y1={props.y1}
y2={props.y2}
strokeWidth={props.strokeWidth}
stroke={props.fill}
<rect
x={props.x1}
width={props.x2 + props.strokeWidth - props.x1}
y={props.y1}
height={props.y2 + props.strokeWidth - props.y1}
fill={props.fill}
className={props.className}
/>
......
libs/shared/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx
+ 9
− 12
View file @ 8194a1b3
......@@ -117,13 +117,12 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
{i === 0 && (
<CustomLine
key={`horizontalLineRowsTop-${i}`}
className={`horizontalLineRowsTop-${i}`}
className={`horizontalLineRowsTop-${i} fill-secondary-300`}
x1={0}
x2={dataModel.pageData.hyperEdgeRanges.length * rowHeight}
y1={-yOffset}
y2={-yOffset}
strokeWidth={0.025 * rowHeight}
fill={configStyle.colorLinesGrid}
/>
)}
{i === numRows - 1 && (
......@@ -134,7 +133,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
y1={rowHeight * (i + 1)}
y2={rowHeight * (i + 1)}
strokeWidth={0.025 * rowHeight}
fill={configStyle.colorLinesGrid}
className="fill-secondary-300"
/>
)}
......@@ -145,7 +144,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
y1={rowHeight * i}
y2={rowHeight * i}
strokeWidth={0.025 * rowHeight}
fill={configStyle.colorLinesGrid}
className="fill-secondary-300"
/>
</React.Fragment>
))}
......@@ -203,7 +202,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
{columnHeaderInformation.map((headerData, headerIndex) => (
<g
key={'gHeadersColumns-' + headerIndex}
className={`headersCols-${headerData.header} cursor-pointer`}
className={`headersCols-${headerData.header} cursor-pointer fill-secondary-200 hover:fill-secondary-300`}
transform={'translate(' + 0 + ',' + (-accumulatedWidthHeaders[headerIndex] - rowHeight) + ')rotate(-90, 0,0)'}
onClick={(event) => {
handleClickHeaderSorting(event);
......@@ -211,18 +210,16 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
onMouseEnter={(event) => {
setHoverRowIndex(headerIndex);
setIsHovered(true);
select(event.currentTarget).select('rect').attr('fill', 'hsl(var(--clr-sec--300))');
}}
onMouseLeave={(event) => {
setIsHovered(sortState !== 'original');
setHoverRowIndex(null);
select(event.currentTarget).select('rect').attr('fill', 'hsl(var(--clr-sec--200))');
}}
>
<rect
width={0 === headerIndex ? headerData.width + rowHeight : headerData.width}
height={rowHeight}
fill={'hsl(var(--clr-sec--200))'}
className="fill-secondary-200"
opacity={1.0}
strokeWidth={0}
></rect>
......@@ -252,7 +249,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
y1={0}
y2={rowHeight * (dataModel.pageData.hyperEdgeRanges.length + 1)}
strokeWidth={0.025 * rowHeight}
fill={configStyle.colorLinesGrid}
className="fill-secondary-300"
/>
</g>
))}
......@@ -269,7 +266,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
y1={0}
y2={0}
strokeWidth={0.025 * rowHeight}
fill={configStyle.colorLinesGrid}
className="fill-secondary-300"
/>
</g>
{indexHyperEdgeRange === dataModel.pageData.hyperEdgeRanges.length - 1 && (
......@@ -290,7 +287,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
y1={rowHeight}
y2={rowHeight}
strokeWidth={0.025 * rowHeight}
fill={configStyle.colorLinesGrid}
className="fill-secondary-300"
/>
</g>
)}
......@@ -317,7 +314,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
x2={0}
y2={(dataLinesHyperedges[indexHyperEdgeRange].y1 - currentPageRows.startIndexRow) * rowHeight}
strokeWidth={0.075 * rowHeight}
fill={visualizationColors.GPNeutral.colors[1][0]}
className="fill-secondary-300"
/>
)}
</g>
......
libs/shared/lib/vis/visualizations/paohvis/components/RowLabels.tsx
+ 9
− 18
View file @ 8194a1b3
......@@ -2,8 +2,6 @@ import React, { useEffect, useState, useMemo } from 'react';
import { CustomLine } from './CustomLine';
import { RowInformation } from '../types';
import { ArrowDownward, ArrowUpward, Sort } from '@mui/icons-material';
import { select, selectAll } from 'd3';
import { visualizationColors, tailwindColors } from 'config';
interface RowLabelsProps {
dataRows: RowInformation;
......@@ -91,12 +89,7 @@ export const RowLabels = ({
{dataRows[0] &&
dataRows[0].data.map((rowLabel, indexRows) => (
<g key={indexRows} transform={'translate(0,' + (yOffset + indexRows * rowHeight) + ')'}>
<g
key={indexRows}
className={'rowsLabel row-' + indexRows}
onMouseEnter={onMouseEnterRowLabels}
onMouseLeave={onMouseLeaveRowLabels}
>
<g className={'rowsLabel row-' + indexRows} onMouseEnter={onMouseEnterRowLabels} onMouseLeave={onMouseLeaveRowLabels}>
{dataRows.map((row, index) => (
<g key={'gRowTable-' + index} transform={'translate(' + accumulatedWidthHeaders[index] + ',0)'}>
{row.data[indexRows] !== undefined &&
......@@ -128,15 +121,15 @@ export const RowLabels = ({
</g>
))}
</g>
<CustomLine x1={0} x2={rowLabelColumnWidth} y1={0} y2={0} strokeWidth={0.025 * rowHeight} fill={configStyle.colorLinesGrid} />
{indexRows !== dataRows[0].data.length && (
<CustomLine x1={0} x2={rowLabelColumnWidth} y1={0} y2={0} strokeWidth={0.025 * rowHeight} className="fill-secondary-300" />
{indexRows === dataRows[0].data.length - 1 && (
<CustomLine
x1={0}
x2={rowLabelColumnWidth}
y1={rowHeight}
y2={rowHeight}
strokeWidth={0.025 * rowHeight}
fill={configStyle.colorLinesGrid}
className="fill-secondary-300"
/>
)}
</g>
......@@ -149,7 +142,7 @@ export const RowLabels = ({
y1={yOffset - rowHeight}
y2={yOffset - rowHeight}
strokeWidth={0.025 * rowHeight}
fill={configStyle.colorLinesGrid}
className="fill-secondary-300"
/>
<CustomLine
x1={rowLabelColumnWidth - rowHeight}
......@@ -157,7 +150,7 @@ export const RowLabels = ({
y1={yOffset - rowHeight}
y2={yOffset + 0 * rowHeight}
strokeWidth={1}
fill={configStyle.colorLinesGrid}
className="fill-secondary-300"
/>
</g>
<g key={'rowInformationHeaders'} className={'rowInformationHeaders'}>
......@@ -165,7 +158,7 @@ export const RowLabels = ({
<g key={'headersContent-' + indexRows}>
<g
key={'gHeadersRows-' + indexRows}
className={`headersRows-${row.header} cursor-pointer`}
className={`headersRows-${row.header} cursor-pointer fill-secondary-200 hover:fill-secondary-300`}
transform={'translate(' + accumulatedWidthHeaders[indexRows] + ',' + (yOffset - rowHeight) + ')'}
onClick={(event) => {
handleClickHeaderSorting(event);
......@@ -173,18 +166,16 @@ export const RowLabels = ({
onMouseEnter={(event) => {
setHoverRowIndex(indexRows);
setIsHovered(true);
select(event.currentTarget).select('rect').attr('fill', 'hsl(var(--clr-sec--300))');
}}
onMouseLeave={(event) => {
setIsHovered(sortState !== 'original');
setHoverRowIndex(null);
select(event.currentTarget).select('rect').attr('fill', 'hsl(var(--clr-sec--200))');
}}
>
<rect
width={dataRows.length - 1 === indexRows ? row.width + rowHeight : row.width}
height={rowHeight}
fill={'hsl(var(--clr-sec--200))'}
className="fill-secondary-200"
opacity={1.0}
strokeWidth={0}
></rect>
......@@ -215,7 +206,7 @@ export const RowLabels = ({
y1={yOffset - rowHeight}
y2={yOffset + dataRows[0].data.length * rowHeight}
strokeWidth={0.025 * rowHeight}
fill={configStyle.colorLinesGrid}
className="fill-secondary-200"
/>
</g>
))}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment