ExternalVendorCode/chirpstack
1
0
Fork 0
mirror of https://github.com/chirpstack/chirpstack.git synced 2025-04-13 22:23:07 +00:00
Code Issues Actions 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

16
ui/src/index.css
View File

@ -22,7 +22,7 @@
float: right;
}
.layout-header .actions > div {
.layout-header .actions>div {
display: inline;
padding-left: 24px;
}
@ -46,7 +46,7 @@
margin-top: 65px;
}
.layout-content .content-header > * {
.layout-content .content-header>* {
float: right;
}
@ -67,14 +67,18 @@ pre {
margin: 0px;
}
.chart-doughtnut {
max-width: 350;
.chart-doughnut {
max-width: 350px;
padding: 0;
margin: auto;
display: block;
}
.dashboard-chart > .ant-card-body {
.chart-doughnut>canvas {
width: 100vh;
}
.dashboard-chart>.ant-card-body {
height: 300px;
}
@ -123,4 +127,4 @@ pre {
.input-code input {
font-family: monospace !important;
}
}

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

@ -110,12 +110,16 @@ function DevicesActiveInactive({ summary }: { summary?: GetDevicesSummaryRespons
};
const options: {
animation: false;
animation: boolean;
responsive: boolean;
maintainAspectRatio: boolean;
} = {
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 }) {
@ -137,12 +141,16 @@ function GatewaysActiveInactive({ summary }: { summary?: GetGatewaysSummaryRespo
};
const options: {
animation: false;
animation: boolean;
responsive: boolean;
maintainAspectRatio: boolean;
} = {
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 }) {
@ -193,12 +201,16 @@ function DevicesDataRates({ summary }: { summary?: GetDevicesSummaryResponse })
}
const options: {
animation: false;
animation: boolean;
responsive: boolean;
maintainAspectRatio: boolean;
} = {
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() {

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

@ -115,12 +115,16 @@ function GatewaysActiveInactive(props: GatewayProps) {
};
const options: {
animation: false;
animation: boolean;
responsive: boolean;
maintainAspectRatio: boolean;
} = {
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 {
@ -148,12 +152,16 @@ function DevicesActiveInactive(props: DeviceProps) {
};
const options: {
animation: false;
animation: boolean;
responsive: boolean;
maintainAspectRatio: boolean;
} = {
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) {
@ -204,12 +212,16 @@ function DevicesDataRates(props: DeviceProps) {
}
const options: {
animation: false;
animation: boolean;
responsive: boolean;
maintainAspectRatio: boolean;
} = {
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 }) {