Skip to content

Commit

Permalink
fix(charts): improved chart performance
Browse files Browse the repository at this point in the history
  • Loading branch information
@christopherpickering
christopherpickering committed Aug 24, 2023
1 parent 982f2b3 commit a49ef93
Show file tree
Hide file tree
Showing 19 changed files with 233 additions and 247 deletions.
3 changes: 1 addition & 2 deletions app/components/charts/driveChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export const DriveChart = ({ url }: { url: string }) => {
display: false,
},
tooltip: {
position: 'mouse',
// position: 'mouse',
callbacks: {
label: function (tooltipItem: { formattedValue: string }) {
return tooltipItem.formattedValue + sizeUnit;
Expand Down Expand Up @@ -226,7 +226,6 @@ export const DriveChart = ({ url }: { url: string }) => {
})),
borderColor: '#cbd5e1',
backgroundColor: '#e2e8f0',
borderRadius: { topLeft: 2, topRight: 2 },
cubicInterpolationMode: 'monotone',
pointStyle: false,
tension: 0.4,
Expand Down
37 changes: 19 additions & 18 deletions app/components/charts/fileChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,6 @@ export const FileChart = ({ url }: { url: string }) => {
stacked: true,
},
x: {
stacked: true,
type: 'time',
min: () => usageFetcher.data?.file?.startDate,
max: () => usageFetcher.data?.file?.endDate,
Expand Down Expand Up @@ -164,6 +163,12 @@ export const FileChart = ({ url }: { url: string }) => {
const xUnit =
dateOptions.filter((x) => x.value === unit)?.[0]?.chartUnit || 'hour';

type usageType = {
createdAt: string;
maxSize: number;
free: number;
used: number;
};
const chartData = {
datasets: [
{
Expand All @@ -172,10 +177,10 @@ export const FileChart = ({ url }: { url: string }) => {
label: 'Used',
cubicInterpolationMode: 'monotone',
tension: 0.4,
data: usageFetcher.data?.file?.usage?.map((x: DatabaseFileUsage) => ({
data: usageFetcher.data?.file?.usage?.map((x: usageType) => ({
x: x.createdAt,
y: Number(
bytes(Number(x.usedSize), { unit: sizeUnit as Unit }).replace(
bytes(Number(x.used), { unit: sizeUnit as Unit }).replace(
sizeUnit,
'',
),
Expand Down Expand Up @@ -225,20 +230,18 @@ export const FileChart = ({ url }: { url: string }) => {
},
},
pointStyle: false,
stack: 'line-stack',
},
{
label: 'Free',
fill: true,
data: usageFetcher.data?.file?.usage?.map((x: DatabaseFileUsage) => ({
data: usageFetcher.data?.file?.usage?.map((x: usageType) => ({
x: x.createdAt,
y: x.currentSize
y: x.free
? Number(
bytes(
Math.max(Number(x.currentSize) - Number(x.usedSize), 0),
{
unit: sizeUnit as Unit,
},
).replace(sizeUnit, ''),
bytes(Number(x.free), {
unit: sizeUnit as Unit,
}).replace(sizeUnit, ''),
)
: null,
})),
Expand All @@ -248,20 +251,18 @@ export const FileChart = ({ url }: { url: string }) => {
cubicInterpolationMode: 'monotone',
pointStyle: false,
tension: 0.4,
stack: 'line-stack',
},
{
label: 'Limit',
fill: true,
data: usageFetcher.data?.file?.usage?.map((x: DatabaseFileUsage) => ({
data: usageFetcher.data?.file?.usage?.map((x: usageType) => ({
x: x.createdAt,
y: x.maxSize
? Number(
bytes(
Math.max(Number(x.maxSize) - Number(x.currentSize), 0),
{
unit: sizeUnit as Unit,
},
).replace(sizeUnit, ''),
bytes(Number(x.maxSize), {
unit: sizeUnit as Unit,
}).replace(sizeUnit, ''),
)
: undefined,
})),
Expand Down
20 changes: 7 additions & 13 deletions app/components/charts/memoryChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ export const MemoryChart = ({ url }: { url: string }) => {

const xUnit =
dateOptions.filter((x) => x.value === unit)?.[0]?.chartUnit || 'hour';

type MemoryData = { createdAt: string; free: number; used: number };
const chartData = {
datasets: [
{
Expand All @@ -148,15 +148,12 @@ export const MemoryChart = ({ url }: { url: string }) => {
label: 'Used',
cubicInterpolationMode: 'monotone',
tension: 0.4,
data: usageFetcher.data?.monitor?.feeds?.map((x: MonitorFeeds) => ({
data: usageFetcher.data?.monitor?.feeds?.map((x: MemoryData) => ({
x: x.createdAt,
y: Number(
bytes(
(Number(x?.memoryTotal) || 0) - (Number(x?.memoryFree) || 0),
{
unit: 'GB',
},
).replace('GB', ''),
bytes(Number(x.used), {
unit: 'GB',
}).replace('GB', ''),
),
})),
segment: {
Expand Down Expand Up @@ -208,13 +205,10 @@ export const MemoryChart = ({ url }: { url: string }) => {
spanGaps: 1000 * 60 * (xUnit == 'hour' ? 1.5 : 90), // 1.5 min or 1.5 hour
label: 'Free',
fill: true,
data: usageFetcher.data?.monitor?.feeds?.map((x: MonitorFeeds) => ({
data: usageFetcher.data?.monitor?.feeds?.map((x: MemoryData) => ({
x: x.createdAt,
y: Number(
bytes(Number(x.memoryFree) || 0, { unit: 'GB' }).replace(
'GB',
'',
),
bytes(Number(x.free) || 0, { unit: 'GB' }).replace('GB', ''),
),
})),
borderColor: '#cbd5e1',
Expand Down
4 changes: 3 additions & 1 deletion app/models/monitor.server.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ export function getMonitorPublic({ id }: Pick<Monitor, 'id'>) {
model: true,
version: true,
enabled: true,
hasError: true,
host: true,
password: true,
username: true,
Expand Down Expand Up @@ -471,6 +472,7 @@ export function getDriveNotifications({ id }: Pick<Drive, 'id'>) {
id: true,
title: true,
enabled: true,
hasError: true,
monitorId: true,
location: true,
name: true,
Expand Down Expand Up @@ -546,7 +548,7 @@ export function getFileUsage({
id,
startDate,
endDate,
}: Pick<Drive, 'id'> & { startDate: Date; endDate: Date }) {
}: Pick<DatabaseFile, 'id'> & { startDate: Date; endDate: Date }) {
let lastMonth = new Date();
lastMonth = new Date(lastMonth.setMonth(lastMonth.getMonth() - 1));
return prisma.databaseFile.findUnique({
Expand Down
2 changes: 1 addition & 1 deletion app/routes/_auth.$monitorType/route.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export default function Index() {
[],
);
const [sorting, setSorting] = React.useState<SortingState>([
{ id: 'title', desc: true },
{ id: 'title', desc: false },
]);

const table = useReactTable({
Expand Down
12 changes: 11 additions & 1 deletion app/routes/_auth.$monitorType/table_columns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
TooltipProvider,
TooltipTrigger,
} from '~/components/ui/tooltip';
import { format } from 'date-fns';
import { useFetcher } from '@remix-run/react';
import { useEffect } from 'react';

Expand All @@ -39,6 +38,7 @@ export const columnsSsh: ColumnDef<any>[] = [
},
enableSorting: true,
enableHiding: false,
sortingFn: 'alphanumeric',
},
{
accessorKey: 'enabled',
Expand Down Expand Up @@ -78,62 +78,71 @@ export const columnsSsh: ColumnDef<any>[] = [
<DataTableColumnHeader column={column} title="Host" />
),
cell: ({ row }) => <div className="">{row.getValue('host')}</div>,
sortingFn: 'alphanumeric',
},
{
accessorKey: 'caption',
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Caption" />
),
cell: ({ row }) => <div className="">{row.getValue('caption')}</div>,
sortingFn: 'alphanumeric',
},
{
accessorKey: 'model',
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Model" />
),
cell: ({ row }) => <div className="">{row.getValue('model')}</div>,
sortingFn: 'alphanumeric',
},
{
accessorKey: 'name',
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Name" />
),
cell: ({ row }) => <div className="">{row.getValue('name')}</div>,
sortingFn: 'alphanumeric',
},
{
accessorKey: 'dnsHostName',
header: ({ column }) => (
<DataTableColumnHeader column={column} title="DNS Hostname" />
),
cell: ({ row }) => <div className="">{row.getValue('dnsHostName')}</div>,
sortingFn: 'alphanumeric',
},
{
accessorKey: 'domain',
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Domain" />
),
cell: ({ row }) => <div className="">{row.getValue('domain')}</div>,
sortingFn: 'alphanumeric',
},
{
accessorKey: 'manufacturer',
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Manufacturer" />
),
cell: ({ row }) => <div className="">{row.getValue('manufacturer')}</div>,
sortingFn: 'alphanumeric',
},
{
accessorKey: 'os',
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Operating System" />
),
cell: ({ row }) => <div className="">{row.getValue('os')}</div>,
sortingFn: 'alphanumeric',
},
{
accessorKey: 'osVersion',
header: ({ column }) => (
<DataTableColumnHeader column={column} title="OS Version" />
),
cell: ({ row }) => <div className="">{row.getValue('osVersion')}</div>,
sortingFn: 'alphanumeric',
},
];

Expand All @@ -160,6 +169,7 @@ export const columnsPing: ColumnDef<any>[] = [
},
enableSorting: true,
enableHiding: false,
sortingFn: 'alphanumeric',
},
{
accessorKey: 'enabled',
Expand Down
17 changes: 14 additions & 3 deletions app/routes/_auth.$monitorType_.$monitorId._index/route.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,14 @@ import { json } from '@remix-run/node';
import { getMonitorPublic } from '~/models/monitor.server';
import { authenticator } from '~/services/auth.server';
import { Link, useLoaderData } from '@remix-run/react';
import { BellRing, MoveLeft, MoveRight, Settings } from 'lucide-react';
import {
Activity,
AlertTriangle,
BellRing,
MoveLeft,
MoveRight,
Settings,
} from 'lucide-react';
import invariant from 'tiny-invariant';
import { LogTable } from '~/components/logTable/table';
import { monitorTypes } from '~/models/monitor';
Expand Down Expand Up @@ -86,9 +93,13 @@ export default function Index() {
</div>
</div>
<div className="flex flex-wrap justify-between">
<H1 className="space-x-2">
{monitor.enabled === false && (
<H1 className="space-x-2 flex">
{monitor.enabled === false ? (
<span className="!text-slate-400">(Disabled)</span>
) : monitor.hasError ? (
<AlertTriangle className="text-red-500 my-auto" size={18} />
) : (
<Activity className="text-emerald-600 my-auto" size={18} />
)}
<span>{monitor.title}</span>
{monitor.type === 'http' && monitor.httpUrl ? (
Expand Down
7 changes: 7 additions & 0 deletions app/routes/_auth.$monitorType_.$monitorId._index/sqlDatabaseColumns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export const columns: ColumnDef<any>[] = [
),
enableSorting: true,
enableHiding: false,
sortingFn: 'alphanumeric',
},

{
Expand Down Expand Up @@ -59,6 +60,7 @@ export const columns: ColumnDef<any>[] = [
<DataTableColumnHeader column={column} title="Title" />
),
cell: ({ row }) => row.getValue('title'),
sortingFn: 'alphanumeric',
},
{
accessorKey: 'state',
Expand All @@ -74,20 +76,23 @@ export const columns: ColumnDef<any>[] = [
{row.getValue('state')}
</div>
),
sortingFn: 'alphanumeric',
},
{
accessorKey: 'recoveryModel',
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Recovery Model" />
),
cell: ({ row }) => row.getValue('recoveryModel'),
sortingFn: 'alphanumeric',
},
{
accessorKey: 'compatLevel',
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Compatibility" />
),
cell: ({ row }) => row.getValue('compatLevel'),
sortingFn: 'alphanumeric',
},
{
accessorKey: 'backupDataDate',
Expand Down Expand Up @@ -118,6 +123,7 @@ export const columns: ColumnDef<any>[] = [
)}
</div>
),
sortingFn: 'alphanumeric',
},
{
accessorKey: 'backupLogDate',
Expand Down Expand Up @@ -145,5 +151,6 @@ export const columns: ColumnDef<any>[] = [
)}
</div>
),
sortingFn: 'alphanumeric',
},
];
2 changes: 1 addition & 1 deletion app/routes/_auth.$monitorType_.$monitorId._index/sqlDatabaseTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export const SqlDatabaseTable = ({
);

const [sorting, setSorting] = React.useState<SortingState>([
{ id: 'name', desc: true },
{ id: 'name', desc: false },
]);

const table = useReactTable({
Expand Down
2 changes: 1 addition & 1 deletion app/routes/_auth.$monitorType_.$monitorId.database.$databaseId/filesTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export const FilesTable = ({
);

const [sorting, setSorting] = React.useState<SortingState>([
{ id: 'fileName', desc: true },
{ id: 'fileName', desc: false },
]);

const table = useReactTable({
Expand Down
Loading

0 comments on commit a49ef93

Please sign in to comment.