From 7b79b4b4afe13d66e10bbd800e2b5d55d9533906 Mon Sep 17 00:00:00 2001 From: Birm Date: Thu, 10 Oct 2024 11:00:02 -0400 Subject: [PATCH] recreate split layout --- config/wines.json | 10 +++- source/components/Eaglescope/Eaglescope.js | 14 +++-- .../Layout/VisGridView/VisGridSplitter.css | 33 +++++++++++ .../Layout/VisGridView/VisGridSplitter.js | 58 +++++++++++++++++++ .../Layout/VisGridView/VisGridView.js | 32 ++++++---- 5 files changed, 128 insertions(+), 19 deletions(-) create mode 100644 source/components/Layout/VisGridView/VisGridSplitter.css create mode 100644 source/components/Layout/VisGridView/VisGridSplitter.js diff --git a/config/wines.json b/config/wines.json index b3db7e7..87e8a56 100644 --- a/config/wines.json +++ b/config/wines.json @@ -11,6 +11,7 @@ "HAS_SETTINGS" : 0, "DATA_RESOURCE_URL": "./config/wines.csv", "DATA_FORMAT": "csv", + "LAYOUT": "left", "VISUALIZATION_VIEW_CONFIGURATION": [ { "id": "type", @@ -19,7 +20,8 @@ "chartType": "PIE_CHART", "fields": { "x": "wine_type" }, "size": [1, 1], - "priority": 50 + "priority": 50, + "designation":"left" }, { "id": "type2", @@ -29,7 +31,8 @@ "fields": { "y": "wine_type" }, "logScale": true, "size": [1, 1], - "priority": 50 + "priority": 50, + "designation":"left" }, { "id":"TextTest", @@ -37,7 +40,8 @@ "description": "Did you know that text exists?", "chartType": "TEXT_CONTAINER", "size": [1, 1], - "priority": 50 + "priority": 50, + "designation":"left" }, { "id": "quality", diff --git a/source/components/Eaglescope/Eaglescope.js b/source/components/Eaglescope/Eaglescope.js index 1c1b599..ceaffba 100644 --- a/source/components/Eaglescope/Eaglescope.js +++ b/source/components/Eaglescope/Eaglescope.js @@ -1,5 +1,5 @@ import React, { useState, useEffect, useContext } from 'react'; -import VisGridView from '../Layout/VisGridView/VisGridView'; +import VisGridSplitter from '../Layout/VisGridView/VisGridSplitter'; import VisFullScreenView from '../Layout/VisFullScreenView/VisFullScreenView'; import ESNavbar from '../ESNavbar/ESNavbar'; import FilterOperationPanel from '../FilterOperationPanel/FilterOperationPanel'; @@ -39,12 +39,12 @@ function Eaglescope() { if (filters.length > 0) { setProgressAttrs({ now: filteredData.length, - label: `${filteredData.length}/${data.length}, ${Math.floor((filteredData.length/data.length)*100)}\%`, + label: `${filteredData.length}/${data.length}, ${Math.floor((filteredData.length / data.length) * 100)}%`, }); } else { setProgressAttrs({ now: data.length, - label: `${data.length}/${data.length}, ${Math.floor((data.length/data.length)*100)}\%`, + label: `${data.length}/${data.length}, ${Math.floor((data.length / data.length) * 100)}%`, }); } }, [filters, filteredData]); @@ -85,10 +85,16 @@ function Eaglescope() { fullScreened={isFullScreen} /> ) : ( - + )} ); } export default Eaglescope; + diff --git a/source/components/Layout/VisGridView/VisGridSplitter.css b/source/components/Layout/VisGridView/VisGridSplitter.css new file mode 100644 index 0000000..66269e8 --- /dev/null +++ b/source/components/Layout/VisGridView/VisGridSplitter.css @@ -0,0 +1,33 @@ +.vis-grid-splitter.single { + width: 100%; + height: 100%; + } + + .vis-grid-splitter.split-horizontal { + display: flex; + height: 100%; + } + + .left-column { + overflow-y: auto; + } + + .right-column { + flex: 1; + overflow-y: auto; + } + + .vis-grid-splitter.split-vertical { + display: flex; + flex-direction: column; + height: 100%; + } + + .top-row { + overflow-y: auto; + } + + .bottom-row { + flex: 1; + overflow-y: auto; + } \ No newline at end of file diff --git a/source/components/Layout/VisGridView/VisGridSplitter.js b/source/components/Layout/VisGridView/VisGridSplitter.js new file mode 100644 index 0000000..37f3756 --- /dev/null +++ b/source/components/Layout/VisGridView/VisGridSplitter.js @@ -0,0 +1,58 @@ +import React, { useContext } from 'react'; +import PropTypes from 'prop-types'; +import VisGridView from './VisGridView'; +import { ConfigContext } from '../../../contexts/ConfigContext'; +import './VisGridSplitter.css'; + +const VisGridSplitter = ({ layout, size, fullVisScreenHandler, fullScreened }) => { + const { config } = useContext(ConfigContext); + + const renderSingleView = () => ( +
+ +
+ ); + + const renderLeftRightSplit = () => ( +
+
+ +
+
+ +
+
+ ); + + const renderTopBottomSplit = () => ( +
+
+ +
+
+ +
+
+ ); + + switch (layout) { + case 'left': + case 'right': + return renderLeftRightSplit(); + case 'top': + return renderTopBottomSplit(); + case 'default': + default: + return renderSingleView(); + } +}; + +VisGridSplitter.propTypes = { + layout: PropTypes.oneOf(['default', 'left', 'right', 'top']).isRequired, + size: PropTypes.string.isRequired, // Size should include units, e.g., '300px' + fullVisScreenHandler: PropTypes.func.isRequired, + fullScreened: PropTypes.bool.isRequired, +}; + +export default VisGridSplitter; + diff --git a/source/components/Layout/VisGridView/VisGridView.js b/source/components/Layout/VisGridView/VisGridView.js index 69befaf..6c3821f 100644 --- a/source/components/Layout/VisGridView/VisGridView.js +++ b/source/components/Layout/VisGridView/VisGridView.js @@ -1,5 +1,5 @@ import React, { - useState, useRef, useEffect, useContext, + useState, useRef, useEffect, useContext, useMemo, } from 'react'; import { debounce } from 'lodash'; import GridLayout from 'react-grid-layout'; @@ -7,21 +7,13 @@ import PropTypes from 'prop-types'; import VisGridItem from './VisGridItem/VisGridItem'; import { getLayoutConfig } from '../../../common/utils'; import { ConfigContext } from '../../../contexts/ConfigContext'; - -// component style import './VisGridView.css'; -/** - * This Component is Responsible for Handling Layout - * Calculations and Resize Handler - * @param {Function} fullVisScreenHandler Handler to set - * @param {Boolean} fullScreened - */ -function VisGridView({ fullVisScreenHandler, fullScreened }) { +function VisGridView({ fullVisScreenHandler, fullScreened, designation }) { const { config } = useContext(ConfigContext); const grid = config.UNIT_OF_GRID_VIEW; const margins = config.MARGIN_OF_GRID_VIEW; - const visConfig = config.VISUALIZATION_VIEW_CONFIGURATION; + const AllVisConfig = config.VISUALIZATION_VIEW_CONFIGURATION; const draggableHandle = config.GRAGGABLE ? '.draggable' : ''; const isDraggable = config.DRAGGABLE || false; const isResizable = config.RESIZABLE || false; @@ -37,6 +29,15 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) { }); const self = useRef(); + const visConfig = useMemo(() => { + console.log("designation", designation) + if (designation == "*"){ + return AllVisConfig // for * don't filter, just show all + } else { + return AllVisConfig.filter((x) => x.designation === designation || (!x.designation && designation === "default")); + } + }, [AllVisConfig, designation]); + const updateViewSize = () => { const rect = self.current.getBoundingClientRect(); const cols = parseInt((rect.width - margins[0]) / (grid[0] + margins[0]), 10); @@ -69,13 +70,14 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) { SetIsResizing(false); SetResizingItemId(null); }; + useEffect(() => { updateViewSize(); window.addEventListener('resize', debouncedUpdateViewSize); return () => { window.removeEventListener('resize', debouncedUpdateViewSize); }; - }, [appLayout.currentCols, config.UNIT_OF_GRID_VIEW, config.UNIT_OF_GRID_VIEW, visConfig]); + }, [appLayout.currentCols, config.UNIT_OF_GRID_VIEW, visConfig]); useEffect(() => { const rect = self.current.getBoundingClientRect(); @@ -139,4 +141,10 @@ export default VisGridView; VisGridView.propTypes = { fullVisScreenHandler: PropTypes.func.isRequired, fullScreened: PropTypes.bool.isRequired, + designation: PropTypes.string, }; + +VisGridView.defaultProps = { + designation: "*", +}; +