mirror of
https://github.com/pezkuwichain/pezkuwi-telemetry.git
synced 2026-04-30 18:58:02 +00:00
Maciej Hirsz
ebb01c1a7d
* More responsive React updates on scroll * `Icon`s now use shadow dom * Faster Sparkline * Recycle table rows * Separate Header from Chain to avoid vdom diffing * Separate THead from Row.HEADER to avoid vdom diffing * Throttle rendering updates on chain tabs, also styles * Minor tweaks and fixes * Created components for all columns * Wrapping up Column refactor * Rename Row--td to Column * Lazy `Ago` * Update styles for faster layouting * Minor cleanup * Fix Connection * Use shadow DOM in `PolkadotIcon` * Comments and tweaks for the List component * Faster Tooltip and Truncate * Minor tweaks * Tooltiped columns can now be copied * Future-proof Connection * Remove the <div> wrapper from Icon * Fix dash on missing graph data * Clean up some SVGs * Cleanup and comments * Localize the use of `previousKeys` to `recalculateKeys` * Custom appState disjoint from React component state * Make appState and appUpdate refs readonly * Cleanup
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import * as React from 'react';
|
|
import { Types, Maybe, timestamp } from '../../../common';
|
|
import { Column, BANDWIDTH_SCALE } from './';
|
|
import { Node } from '../../../state';
|
|
import { Sparkline } from '../../';
|
|
import icon from '../../../icons/cloud-download.svg';
|
|
|
|
export class DownloadColumn extends React.Component<Column.Props, {}> {
|
|
public static readonly label = 'Download Bandwidth';
|
|
public static readonly icon = icon;
|
|
public static readonly width = 40;
|
|
public static readonly setting = 'download';
|
|
public static readonly sortBy = ({ download }: Node) =>
|
|
download.length < 3 ? 0 : download[download.length - 1];
|
|
|
|
private data: Array<number> = [];
|
|
|
|
public shouldComponentUpdate(nextProps: Column.Props) {
|
|
// Diffing by ref, as data is an immutable array
|
|
return this.data !== nextProps.node.download;
|
|
}
|
|
|
|
render() {
|
|
const { download, chartstamps } = this.props.node;
|
|
|
|
this.data = download;
|
|
|
|
if (download.length < 3) {
|
|
return <td className="Column">-</td>;
|
|
}
|
|
|
|
return (
|
|
<td className="Column">
|
|
<Sparkline
|
|
width={44}
|
|
height={16}
|
|
stroke={1}
|
|
format={Column.formatBandwidth}
|
|
values={download}
|
|
stamps={chartstamps}
|
|
minScale={BANDWIDTH_SCALE}
|
|
/>
|
|
</td>
|
|
);
|
|
}
|
|
}
|