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

updated donut chart

This commit is contained in:
Nalvazhuthi 2025-04-14 18:14:40 +05:30
parent 5066638782
commit 7b2d77e273
3 changed files with 32 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/ui/inputs/MultiLevelDropDown.tsx
View File

@ -259,8 +259,8 @@ const MultiLevelDropdown = ({
{open && ( {open && (
<div className="dropdown-menu"> <div className="dropdown-menu">
<div className="dropdown-content "> <div className="dropdown-content ">
{/* loading list */}
{/* loading list */}
{/* <div className="loading" /> */} {/* <div className="loading" /> */}
{/* Unselect Option */} {/* Unselect Option */}

5
app/src/modules/visualization/RealTimeVisulization.tsx
View File

@ -93,6 +93,7 @@ const RealTimeVisulization: React.FC = () => {
"sidebar-right-wrapper", "sidebar-right-wrapper",
"card", "card",
"dropdown-menu", "dropdown-menu",
"dropdown-options",
], ],
setMenuVisible: () => setSelectedChartId(null), setMenuVisible: () => setSelectedChartId(null),
}); });
@ -257,7 +258,6 @@ const RealTimeVisulization: React.FC = () => {
} }
}; };
useEffect(() => { useEffect(() => {
const handleClickOutside = (event: MouseEvent) => { const handleClickOutside = (event: MouseEvent) => {
const editWidgetOptions = document.querySelector( const editWidgetOptions = document.querySelector(
@ -301,10 +301,9 @@ const RealTimeVisulization: React.FC = () => {
return () => resizeObserver.unobserve(canvas); return () => resizeObserver.unobserve(canvas);
}, []); }, []);
return ( return (
<> <>
<style> <style>
{` {`
:root { :root {
--realTimeViz-container-width: ${canvasDimensions.width}px; --realTimeViz-container-width: ${canvasDimensions.width}px;

20
app/src/modules/visualization/widgets/2d/charts/DoughnutGraphComponent.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useMemo, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { Line } from "react-chartjs-2"; import { Doughnut } from "react-chartjs-2";
import io from "socket.io-client"; import io from "socket.io-client";
import axios from "axios"; import axios from "axios";
@ -16,7 +16,7 @@ interface ChartComponentProps {
fontWeight?: "Light" | "Regular" | "Bold"; fontWeight?: "Light" | "Regular" | "Bold";
} }
const LineGraphComponent = ({ const DoughnutGraphComponent = ({
id, id,
type, type,
title, title,
@ -97,11 +97,11 @@ const LineGraphComponent = ({
}, },
}, },
scales: { scales: {
x: { // x: {
ticks: { // ticks: {
display: true, // This hides the x-axis labels // display: true, // This hides the x-axis labels
}, // },
}, // },
}, },
}), }),
[title, chartFontStyle, name] [title, chartFontStyle, name]
@ -161,8 +161,6 @@ const LineGraphComponent = ({
try { try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`); const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
if (response.status === 200) { if (response.status === 200) {
console.log('line chart res',response);
setmeasurements(response.data.Data.measurements) setmeasurements(response.data.Data.measurements)
setDuration(response.data.Data.duration) setDuration(response.data.Data.duration)
setName(response.data.widgetName) setName(response.data.widgetName)
@ -186,7 +184,7 @@ const LineGraphComponent = ({
} }
,[chartMeasurements, chartDuration, widgetName]) ,[chartMeasurements, chartDuration, widgetName])
return <Line data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />; return <Doughnut data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
}; };
export default LineGraphComponent; export default DoughnutGraphComponent;