GSoC22: Add Chart Settings Dashboard

.eslintrc.json

@@ -19,6 +19,22 @@
     "react/jsx-filename-extension": 0,
     "no-plusplus": 0,
     "no-param-reassign": ["error", { "props": false }],
-    "prefer-destructuring": ["error", { "object": true, "array": false }]
+    "prefer-destructuring": ["error", { "object": true, "array": false }],
+    "jsx-a11y/label-has-associated-control": [
+      "error",
+      {
+        "required": {
+          "some": ["nesting", "id"]
+        }
+      }
+    ],
+    "jsx-a11y/label-has-for": [
+      "error",
+      {
+        "required": {
+          "some": ["nesting", "id"]
+        }
+      }
+    ]
   }
 }

config/demo.json

@@ -7,7 +7,6 @@
   "MARGIN_OF_GRID_VIEW": [10, 10],
   "DATA_RESOURCE_URL": "../config/wines.csv",
   "DATA_FORMAT": "csv",
-  "HIDE_BORDER": true,
   "THEME_COLOR": "#007bff",
   "VISUALIZATION_VIEW_CONFIGURATION": [
     {

package.json

@@ -35,7 +35,7 @@
     "crossfilter2": "^1.5.4",
     "d3": "^5.16.0",
     "jquery": "^3.5.1",
-    "lodash": "^4.17.20",
+    "lodash": "^4.17.21",
     "mdbreact": "^5.2.0",
     "parcel-bundler": "^1.12.4",
     "popper.js": "^1.16.1",

source/components/Layout/VisGridView/VisGridItem/VisGridItem.js

@@ -41,6 +41,7 @@ function VisGridItem(props) {
         toggleFullScreen={props.toggleFullScreen}
         fullScreened={props.fullScreened}
         hover={hover}
+        setHover={setHover}
         filters={filters}
         filterRemove={removeFiltersHandler}
       />

source/components/Layout/VisGridView/VisGridItem/VisGridItemControl/VisGridItemControl.js

@@ -1,14 +1,16 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Button from 'react-bootstrap/Button';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCompressArrowsAlt, faExpandArrowsAlt } from '@fortawesome/free-solid-svg-icons';
 import PropTypes from 'prop-types';
+import VisSettings from '../../../../VisSettings/VisSettings';
 
 // css class
 import './VisGridItemControl.css';
 
 function VisGridItemControl(props) {
+  const [show, setShow] = useState(false);
   let btnFilterRemove;
   if (props.filters.length > 0 && props.filters.find((f) => f.id === props.id)) {
     btnFilterRemove = (
@@ -25,18 +27,10 @@ function VisGridItemControl(props) {
   }
   return (
     <div>
-      {props.hover && (
+      {(props.hover || show) && (
         <div className="vis-grid-item-control">
           {btnFilterRemove}
-
-          <Button
-            style={{
-              background: 'none',
-              border: 'none',
-            }}
-          >
-            <FontAwesomeIcon icon="info-circle" />
-          </Button>
+          <VisSettings id={props.id} show={show} setShow={setShow} setHover={props.setHover} />
           <Button
             style={{
               background: 'none',
@@ -61,4 +55,5 @@ VisGridItemControl.propTypes = {
   filterRemove: PropTypes.func.isRequired,
   fullScreened: PropTypes.bool.isRequired,
   toggleFullScreen: PropTypes.func.isRequired,
+  setHover: PropTypes.func.isRequired,
 };

source/components/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.js

@@ -27,6 +27,7 @@ function VisGridItemHeader(props) {
         fullScreened={props.fullScreened}
         toggleFullScreen={props.toggleFullScreen}
         hover={props.hover}
+        setHover={props.setHover}
         filters={props.filters}
         filterRemove={props.filterRemove}
       />
@@ -45,4 +46,5 @@ VisGridItemHeader.propTypes = {
   filterRemove: PropTypes.func.isRequired,
   fullScreened: PropTypes.bool.isRequired,
   toggleFullScreen: PropTypes.func.isRequired,
+  setHover: PropTypes.func.isRequired,
 };

source/components/Layout/VisGridView/VisGridView.js

@@ -45,7 +45,6 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) {
       && margins[1] === appLayout.margins[1]
     ) return;
     const gridLayoutWidth = cols * grid[0] + (cols + 1) * margins[0];
-
     const updatedLayout = getLayoutConfig(visConfig, cols);
 
     setAppLayout({
@@ -60,7 +59,6 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) {
   const debouncedUpdateViewSize = debounce(updateViewSize, 100);
 
   useEffect(() => {
-    // console.log('kaak');
     // if (!appLayout.currentCols) updateViewSize();
     updateViewSize();
     window.addEventListener('resize', debouncedUpdateViewSize);
@@ -69,6 +67,21 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) {
     };
   }, [appLayout.currentCols, config.UNIT_OF_GRID_VIEW, config.UNIT_OF_GRID_VIEW]);
 
+  useEffect(() => {
+    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);
+
+    setAppLayout({
+      width: gridLayoutWidth,
+      currentCols: cols,
+      layout: updatedLayout.layout,
+      margins,
+      grid,
+    });
+  }, [visConfig]);
+
   return (
     <div className="vis-grid-view" ref={self}>
       {appLayout.layout.length > 0 && (
@@ -80,7 +93,7 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) {
           layout={appLayout.layout}
           draggableHandle={draggableHandle}
         >
-          {appLayout.layout.map((item, index) => (
+          {appLayout.layout.map((item) => (
             <div
               key={item.i}
               style={{
@@ -91,7 +104,7 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) {
             >
               <VisGridItem
                 layout={appLayout}
-                operation={visConfig[index]}
+                operation={visConfig.find((vis) => vis.id === item.i)}
                 toggleFullScreen={fullVisScreenHandler}
                 fullScreened={fullScreened}
               />

source/components/Settings/containers/ColumnInput.js

@@ -25,8 +25,10 @@ ColumnInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   setValue: PropTypes.func.isRequired,
   type: PropTypes.string,
+  disabled: PropTypes.bool,
 };
 
 ColumnInput.defaultProps = {
   type: 'text',
+  disabled: false,
 };

source/components/VisSettings/VisSettings.css

@@ -0,0 +1,50 @@
+.visSettings-row {
+  display: flex;
+}
+
+.visSettings-label {
+  font-family: "Rubik", sans-serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 29px;
+
+  display: inline-block;
+  margin-bottom: 5px;
+  color: #152536;
+}
+
+.visSettings-input {
+  /* /Gray / White */
+
+  background: #ffffff;
+  /* Stroke/Input */
+
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+
+  font-family: "Rubik", sans-serif;
+  height: 38px;
+  padding: 10px 5px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 21px;
+  /* identical to box height, or 131% */
+
+  /* Secondary/Light Color */
+
+  color: #abb5be;
+}
+
+.visSettings-input:focus {
+  color: #152536;
+}
+
+.icon:hover {
+  cursor: pointer;
+}
+
+.icon {
+  margin: 0px 5px;
+}