ExternalVendorCode/chirpstack
1
0
Fork 0
mirror of https://github.com/chirpstack/chirpstack.git synced 2025-06-04 00:40:44 +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; float: right;
} }
.layout-header .actions > div { .layout-header .actions>div {
display: inline; display: inline;
padding-left: 24px; padding-left: 24px;
} }
@ -46,7 +46,7 @@
margin-top: 65px; margin-top: 65px;
} }
.layout-content .content-header > * { .layout-content .content-header>* {
float: right; float: right;
} }
@ -67,14 +67,18 @@ 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;
} }
.dashboard-chart > .ant-card-body { .chart-doughnut>canvas {
width: 100vh;
}
.dashboard-chart>.ant-card-body {
height: 300px; height: 300px;
} }
@ -123,4 +127,4 @@ pre {
.input-code input { .input-code input {
font-family: monospace !important; font-family: monospace !important;
} }

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 }) {