Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance Visualization and Design components: add 'Design' option to ToggleHeader, improve state handling, and update styles for better consistency

This commit is contained in:
Nalvazhuthi 2025-05-22 15:08:52 +05:30
parent 634acdd2cc
commit 5f9207a0fe
7 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/layout/sidebarRight/visualization/Visualization.tsx
View File

@ -13,7 +13,7 @@ const Visualization = () => {
return ( return (
<div className="visualization-right-sideBar"> <div className="visualization-right-sideBar">
<ToggleHeader <ToggleHeader
options={["Data"]} options={["Data","Design"]}
activeOption={activeOption} activeOption={activeOption}
handleClick={handleToggleClick} handleClick={handleToggleClick}
/> />

32
app/src/components/layout/sidebarRight/visualization/design/Design.tsx
View File

@ -53,7 +53,7 @@ const Design = () => {
// Initialize name input and extract elements when selectedChartId changes // Initialize name input and extract elements when selectedChartId changes
useEffect(() => { useEffect(() => {
setNameInput(selectedChartId?.header || selectedChartId?.title || ""); setNameInput(selectedChartId?.header ? selectedChartId?.title : "");
if (!chartRef.current) return; if (!chartRef.current) return;
@ -70,7 +70,7 @@ const Design = () => {
const tagName = el.tagName.toLowerCase(); const tagName = el.tagName.toLowerCase();
const className = const className =
typeof el.className === "string" ? el.className : ""; typeof el.className === "string" ? el.className : "";
const textContent = el.textContent?.trim() || ""; const textContent = el.textContent?.trim() ?? "";
let selector = tagName; let selector = tagName;
@ -196,22 +196,22 @@ const Design = () => {
return ( return (
<div className="design"> <div className="design">
<div className="selectedWidget"> <div className="selectedWidget">
{selectedChartId?.title || selectedChartId?.header || "Widget 1"} {selectedChartId?.title ? selectedChartId?.header : "Widget 1"}
</div> </div>
<div className="reviewChart" ref={chartRef}> <div className="reviewChart" ref={chartRef}>
{selectedChartId?.title ? ( {selectedChartId?.title ? (
<ChartComponent <ChartComponent
type={selectedChartId.type || "bar"} type={selectedChartId.type ?? "bar"}
title={selectedChartId.title} title={selectedChartId.title}
data={selectedChartId.data || defaultChartData} data={selectedChartId.data ?? defaultChartData}
/> />
) : ( ) : (
<SimpleCard <SimpleCard
header={selectedChartId?.header || ""} header={selectedChartId?.header ?? ""}
icon={WalletIcon} icon={WalletIcon}
value={selectedChartId?.value || ""} value={selectedChartId?.value ?? ""}
per={selectedChartId?.per || ""} per={selectedChartId?.per ?? ""}
/> />
)} )}
</div> </div>
@ -220,7 +220,7 @@ const Design = () => {
<div className="option"> <div className="option">
<span>Element to Style</span> <span>Element to Style</span>
<RegularDropDown <RegularDropDown
header={selectedElementToStyle || "Select Element"} header={selectedElementToStyle ?? "Select Element"}
options={ options={
elementOptions.length > 0 elementOptions.length > 0
? elementOptions.map((opt) => opt.display) ? elementOptions.map((opt) => opt.display)
@ -230,7 +230,7 @@ const Design = () => {
const selected = elementOptions.find( const selected = elementOptions.find(
(opt) => opt.display === value (opt) => opt.display === value
); );
setSelectedElementToStyle(selected?.value || null); setSelectedElementToStyle(selected?.value ?? null);
}} }}
/> />
</div> </div>
@ -249,7 +249,7 @@ const Design = () => {
<div className="option"> <div className="option">
<span>Chart Type</span> <span>Chart Type</span>
<RegularDropDown <RegularDropDown
header={selectedChartId?.type || "Select Type"} header={selectedChartId?.type ?? "Select Type"}
options={["bar", "line", "pie", "doughnut", "radar", "polarArea"]} options={["bar", "line", "pie", "doughnut", "radar", "polarArea"]}
onSelect={(value) => { onSelect={(value) => {
handleUpdateWidget({ type: value }); handleUpdateWidget({ type: value });
@ -261,7 +261,7 @@ const Design = () => {
<div className="option"> <div className="option">
<span>Font Family</span> <span>Font Family</span>
<RegularDropDown <RegularDropDown
header={selectedChartId?.fontFamily || "Select Font"} header={selectedChartId?.fontFamily ?? "Select Font"}
options={["Arial", "Roboto", "Sans-serif"]} options={["Arial", "Roboto", "Sans-serif"]}
onSelect={(value) => setSelectedFont(value)} onSelect={(value) => setSelectedFont(value)}
/> />
@ -270,7 +270,7 @@ const Design = () => {
<div className="option"> <div className="option">
<span>Size</span> <span>Size</span>
<RegularDropDown <RegularDropDown
header={selectedChartId?.fontSize || "Select Size"} header={selectedChartId?.fontSize ?? "Select Size"}
options={["12px", "14px", "16px", "18px"]} options={["12px", "14px", "16px", "18px"]}
onSelect={(value) => setSelectedSize(value)} onSelect={(value) => setSelectedSize(value)}
/> />
@ -279,20 +279,20 @@ const Design = () => {
<div className="option"> <div className="option">
<span>Weight</span> <span>Weight</span>
<RegularDropDown <RegularDropDown
header={selectedChartId?.fontWeight || "Select Weight"} header={selectedChartId?.fontWeight ?? "Select Weight"}
options={["Light", "Regular", "Bold"]} options={["Light", "Regular", "Bold"]}
onSelect={(value) => setSelectedWeight(value)} onSelect={(value) => setSelectedWeight(value)}
/> />
</div> </div>
<div className="option"> <div className="option">
<div <button
className="header" className="header"
onClick={() => setShowColorPicker((prev) => !prev)} onClick={() => setShowColorPicker((prev) => !prev)}
> >
<span>Element Color</span> <span>Element Color</span>
<div className="icon">▾</div> <div className="icon">▾</div>
</div> </button>
{showColorPicker && ( {showColorPicker && (
<div className="colorDisplayer"> <div className="colorDisplayer">

6
app/src/components/ui/inputs/ToggleHeader.tsx
View File

@ -14,15 +14,15 @@ const ToggleHeader: React.FC<ToggleHeaderProps> = ({
return ( return (
<div className="toggle-header-container"> <div className="toggle-header-container">
{options.map((option, index) => ( {options.map((option, index) => (
<div <button
key={index} key={`${index}-${option}`}
className={`toggle-header-item ${ className={`toggle-header-item ${
option === activeOption ? "active" : "" option === activeOption ? "active" : ""
}`} }`}
onClick={() => handleClick(option)} // Call handleClick when an option is clicked onClick={() => handleClick(option)} // Call handleClick when an option is clicked
> >
{option} {option}
</div> </button>
))} ))}
</div> </div>
); );

2
app/src/components/ui/list/DropDownList.tsx
View File

@ -127,7 +127,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
title="collapse-btn" title="collapse-btn"
className="collapse-icon option" className="collapse-icon option"
style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }} style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}
onClick={handleToggle} // onClick={handleToggle}
> >
<ArrowIcon /> <ArrowIcon />
</button> </button>

2
app/src/pages/Project.tsx
View File

@ -37,7 +37,7 @@ import CompareLayOut from "../components/ui/compareVersion/CompareLayOut";
import useToggleStore from "../store/useUIToggleStore"; import useToggleStore from "../store/useUIToggleStore";
import RegularDropDown from "../components/ui/inputs/RegularDropDown"; import RegularDropDown from "../components/ui/inputs/RegularDropDown";
import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved"; import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved";
import SimulationPlayer from "../components/ui/simulation/SimulationPlayer"; import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
import { useProductStore } from "../store/simulation/useProductStore"; import { useProductStore } from "../store/simulation/useProductStore";
const Project: React.FC = () => { const Project: React.FC = () => {

2
app/src/store/builder/store.ts
View File

@ -472,7 +472,7 @@ interface CompareStore {
} }
export const useCompareStore = create<CompareStore>((set) => ({ export const useCompareStore = create<CompareStore>((set) => ({
comparePopUp: true, comparePopUp: false,
setComparePopUp: (value) => set({ comparePopUp: value }), setComparePopUp: (value) => set({ comparePopUp: value }),
toggleComparePopUp: () => toggleComparePopUp: () =>
set((state) => ({ comparePopUp: !state.comparePopUp })), set((state) => ({ comparePopUp: !state.comparePopUp })),

6
app/src/styles/layout/sidebar.scss
View File

@ -831,7 +831,7 @@
gap: 15px; gap: 15px;
padding: 0; padding: 0;
font-size: var(--font-weight-regular); font-size: var(--font-weight-regular);
color: #4a4a4a; color: var(--text-color);
.reviewChart { .reviewChart {
width: 100%; width: 100%;
@ -851,7 +851,7 @@
.reviewChart { .reviewChart {
width: 100%; width: 100%;
height: 150px; height: 150px;
background: #f0f0f0; background: var(--background-color);
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -888,6 +888,7 @@
justify-content: start; justify-content: start;
align-items: center; align-items: center;
input[type="color"] { input[type="color"] {
border: none; border: none;
outline: none; outline: none;
@ -895,6 +896,7 @@
width: 24px; width: 24px;
height: 26px; height: 26px;
border-radius: #{$border-radius-small}; border-radius: #{$border-radius-small};
padding: 0;
} }
} }
} }