ExternalVendorCode/chirpstack
1
0
Fork 0
mirror of https://github.com/chirpstack/chirpstack.git synced 2025-06-06 01:31:35 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

ui: Fix Doughnut chart resizing.

Browse Source 
Fixes #284.
This commit is contained in:
Orne Brocaar 2023-09-29 12:36:42 +01:00
parent 2c986d0889
commit 48aa453e95
3 changed files with 46 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/index.css
View File

@ -67,13 +67,17 @@ pre {
margin: 0px; margin: 0px;
} }
.chart-doughtnut { .chart-doughnut {
max-width: 350; max-width: 350px;
padding: 0; padding: 0;
margin: auto; margin: auto;
display: block; display: block;
} }
.chart-doughnut>canvas {
width: 100vh;
}
.dashboard-chart>.ant-card-body { .dashboard-chart>.ant-card-body {
height: 300px; height: 300px;
} }

24
ui/src/views/dashboard/Dashboard.tsx
View File

@ -110,12 +110,16 @@ function DevicesActiveInactive({ summary }: { summary?: GetDevicesSummaryRespons
}; };
const options: { const options: {
animation: false; animation: boolean;
responsive: boolean;
maintainAspectRatio: boolean;
} = { } = {
animation: false, animation: false,
responsive: true,
maintainAspectRatio: false,
}; };
return <Doughnut data={data} options={options} className="chart-doughtnut" />; return <div className="chart-doughnut"><Doughnut data={data} options={options} /></div>;
} }
function GatewaysActiveInactive({ summary }: { summary?: GetGatewaysSummaryResponse }) { function GatewaysActiveInactive({ summary }: { summary?: GetGatewaysSummaryResponse }) {
@ -137,12 +141,16 @@ function GatewaysActiveInactive({ summary }: { summary?: GetGatewaysSummaryRespo
}; };
const options: { const options: {
animation: false; animation: boolean;
responsive: boolean;
maintainAspectRatio: boolean;
} = { } = {
animation: false, animation: false,
responsive: true,
maintainAspectRatio: false,
}; };
return <Doughnut data={data} options={options} className="chart-doughtnut" />; return <div className="chart-doughnut"><Doughnut data={data} options={options} /></div>;
} }
function DevicesDataRates({ summary }: { summary?: GetDevicesSummaryResponse }) { function DevicesDataRates({ summary }: { summary?: GetDevicesSummaryResponse }) {
@ -193,12 +201,16 @@ function DevicesDataRates({ summary }: { summary?: GetDevicesSummaryResponse })
} }
const options: { const options: {
animation: false; animation: boolean;
responsive: boolean;
maintainAspectRatio: boolean;
} = { } = {
animation: false, animation: false,
responsive: true,
maintainAspectRatio: false,
}; };
return <Doughnut data={data} options={options} className="chart-doughtnut" />; return <div className="chart-doughnut"><Doughnut data={data} options={options} /></div>;
} }
function Dashboard() { function Dashboard() {

24
ui/src/views/tenants/TenantDashboard.tsx
View File

@ -115,12 +115,16 @@ function GatewaysActiveInactive(props: GatewayProps) {
}; };
const options: { const options: {
animation: false; animation: boolean;
responsive: boolean;
maintainAspectRatio: boolean;
} = { } = {
animation: false, animation: false,
responsive: true,
maintainAspectRatio: false,
}; };
return <Doughnut data={data} options={options} className="chart-doughtnut" />; return <div className="chart-doughnut"><Doughnut data={data} options={options} /></div>;
} }
interface DeviceProps { interface DeviceProps {
@ -148,12 +152,16 @@ function DevicesActiveInactive(props: DeviceProps) {
}; };
const options: { const options: {
animation: false; animation: boolean;
responsive: boolean;
maintainAspectRatio: boolean;
} = { } = {
animation: false, animation: false,
responsive: true,
maintainAspectRatio: false,
}; };
return <Doughnut data={data} options={options} className="chart-doughtnut" />; return <div className="chart-doughnut"><Doughnut data={data} options={options} /></div>;
} }
function DevicesDataRates(props: DeviceProps) { function DevicesDataRates(props: DeviceProps) {
@ -204,12 +212,16 @@ function DevicesDataRates(props: DeviceProps) {
} }
const options: { const options: {
animation: false; animation: boolean;
responsive: boolean;
maintainAspectRatio: boolean;
} = { } = {
animation: false, animation: false,
responsive: true,
maintainAspectRatio: false,
}; };
return <Doughnut data={data} options={options} className="chart-doughtnut" />; return <div className="chart-doughnut"><Doughnut data={data} options={options} /></div>;
} }
function TenantDashboard({ tenant }: { tenant: Tenant }) { function TenantDashboard({ tenant }: { tenant: Tenant }) {