diff --git a/libs/shared/lib/components/charts/barplot/barplot.stories.tsx b/libs/shared/lib/components/charts/barplot/barplot.stories.tsx
index 947810b4d6611c652f8e5dc0868fd9c83f0add8e..639e99cd7165f9ad432c59affad2ead991a9e127 100644
--- a/libs/shared/lib/components/charts/barplot/barplot.stories.tsx
+++ b/libs/shared/lib/components/charts/barplot/barplot.stories.tsx
@@ -14,7 +14,7 @@ export default Component;
export const CategoricalData = {
args: {
data: [
- { category: 'Category A', count: 10 },
+ { category: 'Category A', count: 250 },
{ category: 'Category B', count: 20 },
{ category: 'Category C', count: 15 },
],
diff --git a/libs/shared/lib/components/charts/barplot/index.tsx b/libs/shared/lib/components/charts/barplot/index.tsx
index 54fe22869f1bb84271834e14291f8dc02070f24d..362918122337a1ec52f69ae31a83144395d8fd81 100644
--- a/libs/shared/lib/components/charts/barplot/index.tsx
+++ b/libs/shared/lib/components/charts/barplot/index.tsx
@@ -1,5 +1,6 @@
import React, { LegacyRef, useEffect, useRef, useState } from 'react';
import * as d3 from 'd3';
+import Tooltip, { TooltipProps } from '@graphpolaris/shared/lib/components/tooltip';
export type BarPlotProps = {
data: { category: string; count: number }[];
@@ -10,6 +11,7 @@ export type BarPlotProps = {
export const BarPlot = ({ typeBarPlot: typeBarplot, numBins, data }: BarPlotProps) => {
const svgRef = useRef<SVGSVGElement | null>(null);
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+ const [tooltipData, setTooltipData] = useState<{ x: number; y: number; content: React.ReactNode } | null>(null);
useEffect(() => {
if (!svgRef.current) return;
@@ -19,7 +21,12 @@ export const BarPlot = ({ typeBarPlot: typeBarplot, numBins, data }: BarPlotProp
setDimensions({ width: widthSVG, height: heightSVG });
- const marginPercentage = { top: 0.15, right: 0.15, bottom: 0.15, left: 0.15 };
+ const marginPercentage = {
+ top: 0.245,
+ right: 0.245,
+ bottom: 0.245,
+ left: 0.245,
+ };
const margin = {
top: marginPercentage.top * heightSVG,
right: marginPercentage.right * heightSVG,
@@ -47,11 +54,20 @@ export const BarPlot = ({ typeBarPlot: typeBarplot, numBins, data }: BarPlotProp
.domain(
dataSorted.map(function (d) {
return d.category;
- }),
+ })
)
.padding(0.2);
- const yScale = d3.scaleLinear().domain([0, maxCount]).range([heightSVGwithinMargin, 0]).nice();
+ const yScale = d3.scaleLinear().domain([0, maxCount]).range([heightSVGwithinMargin, 0]); //.nice();
+
+ const yAxis1 = d3.axisLeft(yScale).tickValues([0]).tickFormat(d3.format('d')); // to show 0 without decimanls
+ let yAxis2: d3.Axis<d3.NumberValue>;
+
+ if (maxCount < 10) {
+ yAxis2 = d3.axisLeft(yScale).tickValues([maxCount]).tickFormat(d3.format('d'));
+ } else {
+ yAxis2 = d3.axisLeft(yScale).tickValues([maxCount]).tickFormat(d3.format('.2s'));
+ }
groupMargin
.selectAll<SVGRectElement, d3.Bin<string, number>>('barplotCats')
@@ -62,10 +78,43 @@ export const BarPlot = ({ typeBarPlot: typeBarplot, numBins, data }: BarPlotProp
.attr('y', (d) => yScale(d.count))
.attr('width', xScale.bandwidth())
.attr('height', (d) => heightSVGwithinMargin - yScale(d.count))
- .attr('class', 'fill-primary stroke-light');
+ .attr('class', 'fill-primary stroke-white')
+ .on('mouseover', (event, d) => {
+ const tooltipContent = (
+ <div>
+ <span>{d.category.toString()}</span>: <span>{d.count}</span>
+ </div>
+ );
+
+ setTooltipData({ x: event.pageX + 10, y: event.pageY - 28, content: tooltipContent });
+
+ //console.log('mouseover');
+ })
+ .on('mousemove', (event, d) => {
+ if (tooltipData) {
+ setTimeout(() => {
+ setTooltipData((prevTooltipData) => {
+ if (prevTooltipData) {
+ return {
+ ...prevTooltipData,
+ x: event.pageX + 10,
+ y: event.pageY - 28,
+ };
+ }
+ return prevTooltipData;
+ });
+ }, 16); // Delay in milliseconds (adjust as needed)
+ }
+
+ //console.log('mousemove ', event);
+ })
+ .on('mouseleave', (d) => {
+ //console.log('mouseleave');
+ setTooltipData(null);
+ });
- const yAxis = d3.axisLeft(yScale).ticks(5);
- groupMargin.append('g').call(yAxis);
+ groupMargin.append('g').call(yAxis1);
+ groupMargin.append('g').call(yAxis2);
// Barplot for numerical data
} else {
@@ -74,7 +123,7 @@ export const BarPlot = ({ typeBarPlot: typeBarplot, numBins, data }: BarPlotProp
const extentData = d3.extent(dataCount);
const [min, max] = extentData as [number, number];
- const xScale = d3.scaleLinear().range([0, widthSVGwithinMargin]).domain([min, max]).nice();
+ const xScale = d3.scaleLinear().range([0, widthSVGwithinMargin]).domain([min, max]); //.nice();
// d3.histogram -> deprecated
// On d3.bin(), .thresholds(x.ticks(numBins)). Creates artifacts: not full rects on the plot
@@ -96,31 +145,51 @@ export const BarPlot = ({ typeBarPlot: typeBarplot, numBins, data }: BarPlotProp
const bins = histogram(dataCount);
+ const extentBins: [number, number] = d3.extent(bins, (d) => d.length) as [number, number];
+
const yScale = d3
.scaleLinear()
.range([heightSVGwithinMargin, 0])
- .domain(d3.extent(bins, (d) => d.length) as [number, number]);
+ //.domain(d3.extent(bins, (d) => d.length) as [number, number]);
+ .domain([0, extentBins[1]] as [number, number]);
groupMargin
.selectAll<SVGRectElement, d3.Bin<number, number>>('barplotbins')
.data(bins)
.enter()
.append('rect')
- .attr('x', 1)
- .attr('class', 'fill-primary stroke-light')
+ .attr('x', 0)
+ .attr('class', 'fill-primary stroke-white')
.attr('transform', (d) => 'translate(' + xScale(d.x0 || 0) + ',' + yScale(d.length) + ')')
- .attr('width', (d) => xScale(d.x1 || 0) - xScale(d.x0 || 0) - 1)
+ .attr('width', (d) => xScale(d.x1 || 0) - xScale(d.x0 || 0))
.attr('height', (d) => heightSVGwithinMargin - yScale(d.length));
- const xAxis = d3.axisBottom(xScale).ticks(5);
+ const xAxis = d3
+ .axisBottom(xScale)
+ .tickValues([min, Math.round((min + max) / 2.0), max])
+ .tickFormat(d3.format('.2s'));
groupMargin
.append('g')
.attr('transform', 'translate(0,' + heightSVGwithinMargin + ')')
.call(xAxis);
+
+ const yAxis1 = d3.axisLeft(yScale).tickValues([0]).tickFormat(d3.format('d')); // to show 0 without decimanls
+ //const yAxis2 = d3.axisLeft(yScale).tickValues([extentBins[1]]).tickFormat(d3.format('.2s'));
+
+ let yAxis2: d3.Axis<d3.NumberValue>;
+
+ if (extentBins[1] < 10) {
+ yAxis2 = d3.axisLeft(yScale).tickValues([extentBins[1]]).tickFormat(d3.format('d'));
+ } else {
+ yAxis2 = d3.axisLeft(yScale).tickValues([extentBins[1]]).tickFormat(d3.format('.2s'));
+ }
+
+ groupMargin.append('g').call(yAxis1);
+ groupMargin.append('g').call(yAxis2);
}
- svgPlot.selectAll('.tick text').attr('class', 'font-sans text-primary font-semibold').style('stroke', 'none');
+ svgPlot.selectAll('.tick text').attr('class', 'font-mono text-primary font-semibold').style('stroke', 'none');
groupMargin
.append('rect')
@@ -153,6 +222,7 @@ export const BarPlot = ({ typeBarPlot: typeBarplot, numBins, data }: BarPlotProp
preserveAspectRatio="xMidYMid meet"
viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}
></svg>
+ {tooltipData && <Tooltip x={tooltipData.x} y={tooltipData.y} content={tooltipData.content} />}
</div>
);
};
diff --git a/libs/shared/lib/components/tooltip/index.tsx b/libs/shared/lib/components/tooltip/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f44efea2c864bb25216ffde980d735afa2ad12e5
--- /dev/null
+++ b/libs/shared/lib/components/tooltip/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export interface TooltipProps {
+ x: number;
+ y: number;
+ content: React.ReactNode;
+}
+
+const Tooltip: React.FC<TooltipProps> = ({ x, y, content }) => {
+ return (
+ <div className="absolute font-sans bg-light border border-secondary text-secondary p-2" style={{ left: `${x}px`, top: `${y}px` }}>
+ {content}
+ </div>
+ );
+};
+
+export default Tooltip;
diff --git a/libs/shared/lib/components/tooltip/tooltip.stories.tsx b/libs/shared/lib/components/tooltip/tooltip.stories.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4a3ee29ab79efdf53b96691da4c318d87e3a4a12
--- /dev/null
+++ b/libs/shared/lib/components/tooltip/tooltip.stories.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import Tooltip, { TooltipProps } from '.';
+
+export default {
+ title: 'Components/Tooltip',
+ component: Tooltip,
+} as Meta<typeof Tooltip>;
+
+export const BarplotTooltip = (args: TooltipProps) => {
+ const tooltipContent = (
+ <div>
+ <span>{'VVD'}</span>: <span>{30}</span>
+ </div>
+ );
+
+ return (
+ <div style={{ position: 'relative' }}>
+ <Tooltip {...args} content={tooltipContent} />
+ </div>
+ );
+};
+
+BarplotTooltip.args = {
+ x: 100,
+ y: 100,
+ content: 'This is a tooltip',
+};
diff --git a/libs/shared/lib/mock-data/query-result/index.ts b/libs/shared/lib/mock-data/query-result/index.ts
index 7004b4e555353cfa3b62fc3d6c4f3ab0846f0433..925f1f6cef7119c8dcb82887299a80d276b9c38e 100644
--- a/libs/shared/lib/mock-data/query-result/index.ts
+++ b/libs/shared/lib/mock-data/query-result/index.ts
@@ -4,3 +4,4 @@ export * from './bigMockQueryResults';
export * from './mockQueryResults';
export * from './smallFlightsQueryResults';
export * from './mockMobilityQueryResult';
+export * from './typesMockQueryResults';
diff --git a/libs/shared/lib/mock-data/query-result/typesMockQueryResults.ts b/libs/shared/lib/mock-data/query-result/typesMockQueryResults.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dc7a7765b69116d0c63f5d3a394b2b18b8ee6741
--- /dev/null
+++ b/libs/shared/lib/mock-data/query-result/typesMockQueryResults.ts
@@ -0,0 +1,200 @@
+/**
+ * This program has been developed by students from the bachelor Computer Science at
+ * Utrecht University within the Software Project course.
+ * © Copyright Utrecht University (Department of Information and Computing Sciences)
+ */
+
+/* istanbul ignore file */
+/* The comment above was added so the code coverage wouldn't count this file towards code coverage.
+ * We do not test mock data.
+ * See testing plan for more details.*/
+
+/** Mock elements used for testing the query results. */
+export const typesMockQueryResults = {
+ edges: [
+ {
+ from: 'worker/1',
+ id: 'onderdeel_van/1100',
+ _key: '1100',
+ _rev: '_cYl_jTO--O',
+ to: 'worker/3',
+ attributes: {},
+ },
+ {
+ from: 'worker/3',
+ id: 'onderdeel_van/662',
+ _key: '662',
+ _rev: '_cYl_jR2--G',
+ to: 'worker/5',
+ attributes: {},
+ },
+ ],
+ nodes: [
+ {
+ id: 'worker/1',
+ _key: '1',
+ _rev: '_cYl-Qmq-_H',
+ attributes: {
+ name: 'John Doe',
+ age: 30,
+ height: 175.5,
+ sacked: false,
+ birthdate: '1992-03-15',
+ startingSchedule: '08:00:00',
+ commutingDuration: 'PT1H',
+ firstLogin: '2023-12-20T09:30:00Z',
+ },
+ },
+ {
+ id: 'worker/2',
+ _key: '2',
+ _rev: '_cYl-Qmq--5',
+ attributes: {
+ name: 'Bob Johnson',
+ age: 35,
+ height: 180.2,
+ sacked: false,
+ birthdate: '1987-06-10',
+ startingSchedule: '07:45:00',
+ commutingDuration: 'PT1H15M',
+ firstLogin: '2023-12-18T10:00:00Z',
+ },
+ },
+ {
+ id: 'worker/3',
+ _key: '3',
+ _rev: '_cYl-Qmq--3',
+ attributes: {
+ name: 'Jane Smith',
+ age: 28,
+ height: 162.0,
+ sacked: true,
+ birthdate: '1995-08-20',
+ startingSchedule: '09:30:00',
+ commutingDuration: 'PT45M',
+ firstLogin: '2023-12-19T08:45:00Z',
+ },
+ },
+ {
+ id: 'worker/4',
+ _key: '4',
+ _rev: '_cYl-Qmq--z',
+ attributes: {
+ name: 'Bob Knee',
+ age: 35,
+ height: 180.2,
+ sacked: false,
+ birthdate: '1987-06-10',
+ startingSchedule: '07:45:00',
+ commutingDuration: 'PT1H15M',
+ firstLogin: '2023-10-18T10:00:00Z',
+ },
+ },
+ {
+ id: 'worker/5',
+ _key: '5',
+ _rev: '_cYl-Qmq--x',
+ attributes: {
+ name: 'Alice Brown',
+ age: 25,
+ height: 155.8,
+ sacked: true,
+ birthdate: '1998-01-05',
+ startingSchedule: '08:30:00',
+ commutingDuration: 'PT30M',
+ firstLogin: '2023-12-17T11:15:00Z',
+ },
+ },
+ {
+ id: 'worker/6',
+ _key: '6',
+ _rev: '_cYl-Qmq--v',
+ attributes: {
+ name: 'Michael Davis',
+ age: 40,
+ height: 170.0,
+ sacked: false,
+ birthdate: '1982-11-25',
+ startingSchedule: '08:15:00',
+ commutingDuration: 'PT1H30M',
+ firstLogin: '2023-12-16T12:30:00Z',
+ },
+ },
+ {
+ id: 'worker/7',
+ _key: '7',
+ _rev: '_cYl-Qmq--p',
+ attributes: {
+ name: 'Sophia Turner',
+ age: 27,
+ height: 168.5,
+ sacked: false,
+ birthdate: '1994-07-08',
+ startingSchedule: '09:00:00',
+ commutingDuration: 'PT45M',
+ firstLogin: '2023-12-15T14:00:00Z',
+ },
+ },
+ {
+ id: 'worker/8',
+ _key: '8',
+ _rev: '_cYl-Qmq--n',
+ attributes: {
+ name: 'David Miller',
+ age: 34,
+ height: 185.0,
+ sacked: true,
+ birthdate: '1989-04-30',
+ startingSchedule: '07:30:00',
+ commutingDuration: 'PT1H',
+ firstLogin: '2023-12-14T15:15:00Z',
+ },
+ },
+ {
+ id: 'worker/9',
+ _key: '9',
+ _rev: '_cYl-Qmq--l',
+ attributes: {
+ name: 'Olivia Harris',
+ age: 31,
+ height: 160.5,
+ sacked: false,
+ birthdate: '1992-12-15',
+ startingSchedule: '09:45:00',
+ commutingDuration: 'PT1H15M',
+ firstLogin: '2023-12-13T16:30:00Z',
+ },
+ },
+ {
+ id: 'worker/10',
+ _key: '10',
+ _rev: '_cYl-Qmq--j',
+ attributes: {
+ name: 'Daniel Lee',
+ age: 29,
+ height: 175.0,
+ sacked: true,
+ birthdate: '1994-09-20',
+ startingSchedule: '08:00:00',
+ commutingDuration: 'PT30M',
+ firstLogin: '2023-12-12T17:45:00Z',
+ },
+ },
+ {
+ id: 'worker/11',
+ _key: '11',
+ _rev: '_cYl-Qmq--f',
+ attributes: {
+ name: 'Emily White',
+ age: 33,
+ height: 163.5,
+ sacked: false,
+ birthdate: '1989-06-18',
+ startingSchedule: '08:45:00',
+ commutingDuration: 'PT1H30M',
+ firstLogin: '2023-12-11T19:00:00Z',
+ },
+ },
+ ],
+ };
+
\ No newline at end of file
diff --git a/libs/shared/lib/mock-data/schema/big2ndChamberSchemaRaw.ts b/libs/shared/lib/mock-data/schema/big2ndChamberSchemaRaw.ts
new file mode 100644
index 0000000000000000000000000000000000000000..88cc8ddfb93a64ea348f0abcfc4356eb59e91383
--- /dev/null
+++ b/libs/shared/lib/mock-data/schema/big2ndChamberSchemaRaw.ts
@@ -0,0 +1,57 @@
+import { SchemaUtils } from '@graphpolaris/shared/lib/schema/schema-utils';
+import { SchemaFromBackend } from '../../schema';
+
+export const big2ndChamberSchemaRaw: SchemaFromBackend = {
+ nodes: [
+ {
+ name: 'kamerleden',
+ attributes: [
+ {
+ name: 'anc',
+ type: 'int',
+ },
+ {
+ name: 'img',
+ type: 'string',
+ },
+ {
+ name: 'leeftijd',
+ type: 'int',
+ },
+ {
+ name: 'naam',
+ type: 'string',
+ },
+ {
+ name: 'partij',
+ type: 'string',
+ },
+ {
+ name: 'woonplaats',
+ type: 'string',
+ },
+ ],
+ },
+ {
+ name: 'commissies',
+ attributes: [
+ {
+ name: 'naam',
+ type: 'string',
+ },
+ ],
+ },
+ ],
+ edges: [
+ {
+ name: 'WORKED_IN',
+ label: 'WORKED_IN',
+ collection: 'WORKED_IN',
+ from: 'kamerleden',
+ to: 'commissies',
+ attributes: [],
+ },
+ ],
+};
+
+export const big2ndChamberSchema = SchemaUtils.schemaBackend2Graphology(big2ndChamberSchemaRaw);
diff --git a/libs/shared/lib/mock-data/schema/index.ts b/libs/shared/lib/mock-data/schema/index.ts
index 91b46a3f081642ad33eb22eac1bfba328bf02c5d..51d471634ef62eb8bbb4a1156aea54afa6007022 100644
--- a/libs/shared/lib/mock-data/schema/index.ts
+++ b/libs/shared/lib/mock-data/schema/index.ts
@@ -2,3 +2,5 @@ export * from './simpleRaw';
export * from './moviesSchemaRaw';
export * from './northwindSchemaRaw';
export * from './twitterSchemaRaw';
+export * from './big2ndChamberSchemaRaw';
+export * from './typesMockSchemaRaw';
diff --git a/libs/shared/lib/mock-data/schema/typesMockSchemaRaw.ts b/libs/shared/lib/mock-data/schema/typesMockSchemaRaw.ts
new file mode 100644
index 0000000000000000000000000000000000000000..788e8e9f5cd0cfee3b0f65a9a95723b110d60409
--- /dev/null
+++ b/libs/shared/lib/mock-data/schema/typesMockSchemaRaw.ts
@@ -0,0 +1,56 @@
+import { SchemaUtils } from '@graphpolaris/shared/lib/schema/schema-utils';
+import { SchemaFromBackend } from '../../schema';
+
+export const typesMockSchemaRaw: SchemaFromBackend = {
+ nodes: [
+ {
+ name: 'worker',
+ attributes: [
+ {
+ name: 'name',
+ type: 'string',
+ },
+ {
+ name: 'age',
+ type: 'int',
+ },
+ {
+ name: 'height',
+ type: 'float',
+ },
+ {
+ name: 'sacked',
+ type: 'bool',
+ },
+ {
+ name: 'birthdate',
+ type: 'date',
+ },
+ {
+ name: 'startingSchedule',
+ type: 'time',
+ },
+ {
+ name: 'commutingDuration',
+ type: 'duration',
+ },
+ {
+ name: 'firstLogin',
+ type: 'datetime',
+ },
+ ],
+ },
+ ],
+ edges: [
+ {
+ name: 'TEAM_UP',
+ label: 'TEAM_UP',
+ collection: 'TEAM_UP',
+ from: 'worker',
+ to: 'worker',
+ attributes: [],
+ },
+ ],
+};
+
+export const typesMockSchema = SchemaUtils.schemaBackend2Graphology(typesMockSchemaRaw);
diff --git a/libs/shared/lib/schema/pills/nodes/entity/entity-node.tsx b/libs/shared/lib/schema/pills/nodes/entity/entity-node.tsx
index 5192cb2d04dc7306c9090cdcd5da3ca1df3cad19..f533cc90814faff52c66d7c7106a053bd21f9ff2 100644
--- a/libs/shared/lib/schema/pills/nodes/entity/entity-node.tsx
+++ b/libs/shared/lib/schema/pills/nodes/entity/entity-node.tsx
@@ -62,7 +62,7 @@ export const EntityNode = React.memo(({ id, selected, data }: NodeProps<SchemaRe
</Popup>
)}
<div
- className={`rounded-sm hover:shadow-xl transition-all duration-150 shadow min-w-[8rem] text-[0.8rem] bg-gradient-to-r pt-1 from-[#FFA952] to-[#D66700]`}
+ className={`rounded-sm transition-all duration-150 shadow shadow-dark/10 hover:shadow-md hover:shadow-dark/20 min-w-[8rem] text-[0.8rem] bg-gradient-to-r pt-1 from-[#FFA952] to-[#D66700]`}
onDragStart={(event) => onDragStart(event)}
onDragStartCapture={(event) => onDragStart(event)}
onMouseDownCapture={(event) => {
@@ -73,7 +73,7 @@ export const EntityNode = React.memo(({ id, selected, data }: NodeProps<SchemaRe
}}
draggable
>
- <div className={`py-1 ${selected ? 'bg-secondary-400' : 'bg-secondary-50'}`}>
+ <div className={`py-1 ${selected ? 'bg-secondary-300' : 'bg-secondary-100'}`}>
<Handle
style={{ pointerEvents: 'none' }}
id="entityTargetLeft"
diff --git a/libs/shared/lib/schema/pills/nodes/relation/relation-node.tsx b/libs/shared/lib/schema/pills/nodes/relation/relation-node.tsx
index 41196ba18f85c0c1cc70ab4a37b44f71ed920c32..c5518de96f127d8b6554b0ecd5a339d847f85c46 100644
--- a/libs/shared/lib/schema/pills/nodes/relation/relation-node.tsx
+++ b/libs/shared/lib/schema/pills/nodes/relation/relation-node.tsx
@@ -78,12 +78,12 @@ export const RelationNode = React.memo(({ id, selected, data }: NodeProps<Schema
draggable
>
<div
- className={`rounded-sm hover:shadow-xl transition-all duration-150 shadow min-w-[8rem] text-[0.8rem] bg-gradient-to-r pt-1 from-[#4893D4] to-[#1A476E]`}
+ className={`rounded-sm transition-all duration-150 shadow shadow-dark/10 hover:shadow-md hover:shadow-dark/20 min-w-[8rem] text-[0.8rem] bg-gradient-to-r pt-1 from-[#4893D4] to-[#1A476E]`}
style={{
backgroundColor: selected ? '#97a2b6' : '#f4f6f7',
}}
>
- <div className={`py-1 ${selected ? 'bg-secondary-400' : 'bg-secondary-50'}`}>
+ <div className={`py-1 ${selected ? 'bg-secondary-300' : 'bg-secondary-100'}`}>
<Handle
style={{ pointerEvents: 'none' }}
className={styles.handleTriangleTop}
diff --git a/libs/shared/lib/vis/visualizations/table_vis/components/Table.tsx b/libs/shared/lib/vis/visualizations/table_vis/components/Table.tsx
index 0a30b7757904b0b507d02da424d6540c1214585b..79906526e7e11bb7a12f2aaa968f6795b0bfc090 100644
--- a/libs/shared/lib/vis/visualizations/table_vis/components/Table.tsx
+++ b/libs/shared/lib/vis/visualizations/table_vis/components/Table.tsx
@@ -105,6 +105,8 @@ export const Table = ({ data, itemsPerPage, showBarPlot }: TableProps) => {
let categoryCounts = [];
const firstRowData = data[0];
+ console.log('First row: ', firstRowData);
+
let _data2Render = Object.keys(firstRowData.attribute).map((dataColumn: string, i) => {
const newData2Render: Data2RenderI = {
name: dataColumn,
@@ -146,6 +148,19 @@ export const Table = ({ data, itemsPerPage, showBarPlot }: TableProps) => {
newData2Render.data = categoryCounts;
newData2Render.showBarPlot = true;
+ // number: float and int
+ } else if (firstRowData.type[dataColumn] === 'bool') {
+ const groupedData = d3.group(data, (d) => d.attribute[dataColumn]);
+
+ categoryCounts = Array.from(groupedData, ([category, items]) => ({
+ category: category as string,
+ count: items.length,
+ }));
+
+ newData2Render.numElements = categoryCounts.length;
+ newData2Render.data = categoryCounts;
+ newData2Render.showBarPlot = true;
+
// number: float and int
} else if (firstRowData.type[dataColumn] === 'int' || firstRowData.type[dataColumn] === 'float') {
categoryCounts = data.map((obj) => ({
@@ -171,6 +186,8 @@ export const Table = ({ data, itemsPerPage, showBarPlot }: TableProps) => {
return newData2Render;
});
+ console.log(_data2Render);
+
setData2Render(_data2Render);
}, [currentPage, data, sortedData]);
diff --git a/libs/shared/lib/vis/visualizations/table_vis/tablevis.stories.tsx b/libs/shared/lib/vis/visualizations/table_vis/tablevis.stories.tsx
index b7f5d6e33a646153846e025957ca6ef35d17a6f8..c3d1e9c3c90e0a6438335c2c3b55339e055c0688 100644
--- a/libs/shared/lib/vis/visualizations/table_vis/tablevis.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/table_vis/tablevis.stories.tsx
@@ -11,14 +11,20 @@ import {
} from '../../../data-access/store';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
-import { smallFlightsQueryResults, simpleSchemaRaw, bigMockQueryResults } from '../../../mock-data';
+import {
+ big2ndChamberQueryResult,
+ bigMockQueryResults,
+ big2ndChamberSchemaRaw,
+ typesMockSchemaRaw,
+ typesMockQueryResults,
+} from '../../../mock-data';
import { SchemaUtils } from '../../../schema/schema-utils';
import { simpleSchemaAirportRaw } from '../../../mock-data/schema/simpleAirportRaw';
import { Visualizations, setActiveVisualization } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
const Component: Meta<typeof VisualizationPanel> = {
- title: 'Visualizations/SimpleTableVis',
+ title: 'Visualizations/TableVis',
component: VisualizationPanel,
decorators: [
(story) => (
@@ -56,13 +62,24 @@ export const TestWithAirport = {
},
};
-export const TestWithAirportSimple = {
+export const TestWithBig2ndChamber = {
+ play: async () => {
+ const dispatch = Mockstore.dispatch;
+ const schema = SchemaUtils.schemaBackend2Graphology(big2ndChamberSchemaRaw);
+
+ dispatch(setSchema(schema.export()));
+ dispatch(assignNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: big2ndChamberQueryResult } }));
+ dispatch(setActiveVisualization(Visualizations.Table));
+ },
+};
+
+export const TestWithTypesMock = {
play: async () => {
const dispatch = Mockstore.dispatch;
- const schema = SchemaUtils.schemaBackend2Graphology(simpleSchemaRaw);
+ const schema = SchemaUtils.schemaBackend2Graphology(typesMockSchemaRaw);
dispatch(setSchema(schema.export()));
- dispatch(assignNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: smallFlightsQueryResults } }));
+ dispatch(assignNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: typesMockQueryResults } }));
dispatch(setActiveVisualization(Visualizations.Table));
},
};