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: "*",
+};
+