add "HAS_SETTINGS, DRAGGABLE, RESIZABLE" into config files to control…

… drag, resize and settings
sharmalab · Nov 9, 2023 · 99558c4 · 99558c4
1 parent f767141
commit 99558c4
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 34 deletions.
diff --git a/source/common/utils.js b/source/common/utils.js
@@ -109,7 +109,7 @@ export function fillMatrix(matrix, val, pos = [0, 0], size = [matrix[0].length,
 }
 
 // get layout for react-grid-layout
-export function getLayoutConfig(chartsConfig, cols) {
+export function getLayoutConfig(chartsConfig, cols, resiziable = false) {
   const layout = [];
   const matrix = createMatrix(cols);
   // sort charts by priority
@@ -144,7 +144,7 @@ export function getLayoutConfig(chartsConfig, cols) {
       y: pos[1],
       w: size[0],
       h: size[1],
-      isResizable: false,
+      isResizable: resiziable,
     });
   });
 

diff --git a/source/components/Eaglescope/Eaglescope.js b/source/components/Eaglescope/Eaglescope.js
@@ -36,7 +36,6 @@ function Eaglescope() {
   // handle progress bar
   useEffect(() => {
     if (!data) return;
-    console.log(config)
     if (filters.length > 0) {
       setProgressAttrs({
         now: filteredData.length,

diff --git a/source/components/Layout/VisGridView/VisGridItem/VisGridItem.css b/source/components/Layout/VisGridView/VisGridItem/VisGridItem.css
@@ -3,4 +3,18 @@
     position: relative;
     display: flex;
     height: 100%;
+}
+.place-holder {
+    background-color: #f1f1f1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+}
+.chart-area {
+    color:#c4c3d1;
+    height: 45%;
+    width: 45%;
 }
diff --git a/source/components/Layout/VisGridView/VisGridItem/VisGridItem.js b/source/components/Layout/VisGridView/VisGridItem/VisGridItem.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import VisGridItemContent from './VisGridItemContent/VisGridItemContent';
 import VisGridItemHeader from './VisGridItemHeader/VisGridItemHeader';
 import { DataContext } from '../../../../contexts/DataContext';
-
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 // css class
 import './VisGridItem.css';
 
@@ -15,26 +15,21 @@ function VisGridItem(props) {
   const onMouseLeaveHandle = () => {
     setHover(false);
   };
-
   const {
     data, filteredData, filters, addFiltersHandler, removeFiltersHandler,
   } = useContext(DataContext);
 
   useEffect(() => {
     if (props.fullScreened) setHover(true);
   }, [props.fullScreened]);
-
-  /* useEffect(() => {
-    console.log(props.layout);
-  }, [props.layout]); */
-
+  useEffect(() => {}, [props.isResizing]);
   return (
     <div
       className="vis-grid-item"
       onMouseEnter={onMouseEnterHandle}
       onMouseLeave={onMouseLeaveHandle}
-    >
-      <VisGridItemHeader
+
+    ><VisGridItemHeader
         id={props.operation.id}
         title={props.operation.title}
         description={props.operation.description}
@@ -45,7 +40,10 @@ function VisGridItem(props) {
         filters={filters}
         filterRemove={removeFiltersHandler}
       />
-
+
+      {props.isResizing?<div className="place-holder">
+        <FontAwesomeIcon icon="chart-area" className="chart-area"/>
+      </div>:
       <VisGridItemContent
         fields={props.operation.fields}
         chartType={props.operation.chartType}
@@ -57,7 +55,7 @@ function VisGridItem(props) {
         id={props.operation.id}
         title={props.operation.title}
         layout={props.layout}
-      />
+      />}
     </div>
   );
 }

diff --git a/source/components/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.css b/source/components/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.css
@@ -20,6 +20,6 @@
   font-weight: bold;
 }
 
-.draggable {
+.name-header.draggable {
   cursor: move;
 }
diff --git a/source/components/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.js b/source/components/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.js
@@ -7,11 +7,11 @@ import './VisGridItemHeader.css';
 
 function VisGridItemHeader(props) {
   const { config } = useContext(ConfigContext);
-  console.log("config", config)
   const { THEME_COLOR: color } = config;
-  let dragHeader = "name-header draggable";
-  if (config.DISABLE_DRAGGING){
-    dragHeader = "name-header notDraggable";
+
+  let dragHeader = 'name-header';
+  if (config.DRAGGABLE) {
+    dragHeader = 'name-header draggable';
   }
   return (
     <div

diff --git a/source/components/Layout/VisGridView/VisGridView.css b/source/components/Layout/VisGridView/VisGridView.css
@@ -4,6 +4,17 @@
   flex-wrap: wrap;
   width: 100%;
 }
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+  opacity: 0;
+}
+.react-grid-item:hover > .react-resizable-handle.react-resizable-handle-se {
+  opacity: 1;
+}
+
 /* .react-grid-item {
     
 } */
diff --git a/source/components/Layout/VisGridView/VisGridView.js b/source/components/Layout/VisGridView/VisGridView.js
@@ -22,16 +22,19 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) {
   const grid = config.UNIT_OF_GRID_VIEW;
   const margins = config.MARGIN_OF_GRID_VIEW;
   const visConfig = config.VISUALIZATION_VIEW_CONFIGURATION;
-  const draggableHandle = '.draggable';
-
+  const draggableHandle = config.GRAGGABLE ? '.draggable' : '';
+  const isDraggable = config.DRAGGABLE || false;
+  const isResizable = config.RESIZABLE || false;
+
+  const [isResizing, SetIsResizing] = useState(false);
+  const [resizingItemId, SetResizingItemId] = useState(null);
   const [appLayout, setAppLayout] = useState({
     width: 0,
     currentCols: 0,
     layout: [],
     margin: 0,
     grid,
   });
-
   const self = useRef();
 
   const updateViewSize = () => {
@@ -45,7 +48,7 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) {
       && margins[1] === appLayout.margins[1]
     ) return;
     const gridLayoutWidth = cols * grid[0] + (cols + 1) * margins[0];
-    const updatedLayout = getLayoutConfig(visConfig, cols);
+    const updatedLayout = getLayoutConfig(visConfig, cols, isResizable);
 
     setAppLayout({
       width: gridLayoutWidth,
@@ -58,8 +61,15 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) {
 
   const debouncedUpdateViewSize = debounce(updateViewSize, 100);
 
+  const onResizeStartHandle = (layout, oldItem) => {
+    SetIsResizing(true);
+    SetResizingItemId(oldItem.i);
+  };
+  const onResizeStopHandle = () => {
+    SetIsResizing(false);
+    SetResizingItemId(null);
+  };
   useEffect(() => {
-    // if (!appLayout.currentCols) updateViewSize();
     updateViewSize();
     window.addEventListener('resize', debouncedUpdateViewSize);
     return () => {
@@ -71,7 +81,7 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) {
     const rect = self.current.getBoundingClientRect();
     const cols = parseInt((rect.width - margins[0]) / (grid[0] + margins[0]), 10);
     const gridLayoutWidth = cols * grid[0] + (cols + 1) * margins[0];
-    const updatedLayout = getLayoutConfig(visConfig, cols);
+    const updatedLayout = getLayoutConfig(visConfig, cols, isResizable);
 
     setAppLayout({
       width: gridLayoutWidth,
@@ -81,7 +91,7 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) {
       grid,
     });
   }, [visConfig]);
-
+  useEffect(() => {}, [isResizing, resizingItemId]);
   return (
     <div className="vis-grid-view" ref={self}>
       {appLayout.layout.length > 0 && (
@@ -91,7 +101,11 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) {
           width={appLayout.width}
           margin={margins}
           layout={appLayout.layout}
+          isDraggable={isDraggable}
+          isResizable={isResizable}
           draggableHandle={draggableHandle}
+          onResizeStart={onResizeStartHandle}
+          onResizeStop={onResizeStopHandle}
         >
           {appLayout.layout.map((item) => (
             <div
@@ -105,6 +119,7 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) {
             >
               {visConfig.find((vis) => vis.id === item.i) && (
                 <VisGridItem
+                  isResizing={item.i === resizingItemId && isResizing}
                   layout={appLayout}
                   operation={visConfig.find((vis) => vis.id === item.i)}
                   toggleFullScreen={fullVisScreenHandler}

diff --git a/source/components/Settings/Settings.js b/source/components/Settings/Settings.js
@@ -90,10 +90,10 @@ function Settings() {
   return (
     <>
       {showNewVis && <VisSettings chartConfig={newVis} show={showNewVis} setShow={setShowNewVis} />}
-      <Button
+
+      {config.HAS_SETTINGS&&(<Button
         size="lg"
         style={{
-          display: 'none',
           background: 'none',
           border: 'none',
         }}
@@ -102,7 +102,8 @@ function Settings() {
         <span>
           <FontAwesomeIcon size="1x" icon="fa-solid fa-bars" />
         </span>
-      </Button>
+      </Button>)}
+
       <Offcanvas
         show={show}
         onHide={handleClose}

diff --git a/source/components/partials/tooltip.js b/source/components/partials/tooltip.js
@@ -14,8 +14,9 @@ function createTooltip(mount, addLabel, offset) {
   const tooltip = d3
     .select(mount)
     .append('div')
-    .style('opacity', 0)
+    .style('opacity', 1)
     .attr('class', 'tooltip')
+    .style('display', 'none')
     .style('background-color', 'white')
     .style('border', 'solid')
     .style('border-width', '2px')
@@ -25,13 +26,13 @@ function createTooltip(mount, addLabel, offset) {
   const mousemove = function move(d) {
     tooltip
       .html(addLabel(d))
-      .style('opacity', 0.9)
-      .style('left', `${offset.x + d3.mouse(mount)[0]}px`)
-      .style('top', `${offset.y  + d3.mouse(mount)[1]}px`);
+      .style('display', '')
+      .style('left', `${offset.x + d3.mouse(this)[0]}px`)
+      .style('top', `${offset.y + d3.mouse(this)[1]}px`);
   };
 
   const mouseleave = function leave() {
-    tooltip.style('opacity', 0);
+    tooltip.style('display', 'none');
   };
 
   return { mousemove, mouseleave };