mirror of
https://github.com/owncast/owncast.git
synced 2024-12-19 15:56:47 +03:00
d1f3fffe2f
* refactor: move/rename BanUserButton file * refactor: move/rename Chart file * refactor: update generic component filenames to PascalCase * refactor: update config component filenames to PascalCase * refactor: update AdminLayout component filename to PascalCase * refactor: update/move VideoJS component * chore(eslint): disable bad react/require-default-props rule * refactor: normalize ActionButton component * refactor: normalize ActionButtonRow component * refactor: normalize FollowButton component * refactor: normalize NotifyButton component * refactor: normalize ChatActionMessage component * refactor: normalize ChatContainer component * refactor: normalize ChatJoinMessage component * refactor: normalize ChatModerationActionMenu component * refactor: normalize ChatModerationDetailsModal component * refactor: normalize ChatModeratorNotification component * refactor: normalize ChatSocialMessage component * refactor: normalize ChatSystemMessage component * refactor: normalize ChatTextField component * refactor: normalize ChatUserBadge component * refactor: normalize ChatUserMessage component * refactor: normalize ContentHeader component * refactor: normalize OwncastLogo component * refactor: normalize UserDropdown component * chore(eslint): modify react/function-component-definition rule * refactor: normalize CodecSelector component * refactor: update a bunch of functional components using eslint * refactor: update a bunch of functional components using eslint, pt2 * refactor: update a bunch of functional components using eslint, pt3 * refactor: replace all component->component default imports with named imports * refactor: replace all component-stories->component default imports with named imports * refactor: remove default exports from most components * chore(eslint): add eslint config files for the components and pages dirs * fix: use-before-define error in ChatContainer * Fix ChatContainer import * Only process .tsx files in Next builds Co-authored-by: Gabe Kangas <gabek@real-ity.com>
99 lines
2 KiB
TypeScript
99 lines
2 KiB
TypeScript
import ChartJs from 'chart.js/auto';
|
|
import Chartkick from 'chartkick';
|
|
import format from 'date-fns/format';
|
|
import { LineChart } from 'react-chartkick';
|
|
import { FC } from 'react';
|
|
|
|
// from https://github.com/ankane/chartkick.js/blob/master/chart.js/chart.esm.js
|
|
Chartkick.use(ChartJs);
|
|
|
|
interface TimedValue {
|
|
time: Date;
|
|
value: number;
|
|
}
|
|
|
|
export type ChartProps = {
|
|
data?: TimedValue[];
|
|
title?: string;
|
|
color: string;
|
|
unit: string;
|
|
yFlipped?: boolean;
|
|
yLogarithmic?: boolean;
|
|
dataCollections?: any[];
|
|
};
|
|
|
|
function createGraphDataset(dataArray) {
|
|
const dataValues = {};
|
|
dataArray.forEach(item => {
|
|
const dateObject = new Date(item.time);
|
|
const dateString = format(dateObject, 'H:mma');
|
|
dataValues[dateString] = item.value;
|
|
});
|
|
return dataValues;
|
|
}
|
|
|
|
export const Chart: FC<ChartProps> = ({
|
|
data,
|
|
title,
|
|
color,
|
|
unit,
|
|
dataCollections,
|
|
yFlipped,
|
|
yLogarithmic,
|
|
}) => {
|
|
const renderData = [];
|
|
|
|
if (data && data.length > 0) {
|
|
renderData.push({
|
|
name: title,
|
|
color,
|
|
data: createGraphDataset(data),
|
|
});
|
|
}
|
|
|
|
dataCollections.forEach(collection => {
|
|
renderData.push({
|
|
name: collection.name,
|
|
data: createGraphDataset(collection.data),
|
|
color: collection.color,
|
|
dataset: collection.options,
|
|
});
|
|
});
|
|
|
|
// ChartJs.defaults.scales.linear.reverse = true;
|
|
|
|
const options = {
|
|
scales: {
|
|
y: { reverse: false, type: 'linear' },
|
|
x: {
|
|
type: 'time',
|
|
},
|
|
},
|
|
};
|
|
|
|
options.scales.y.reverse = yFlipped;
|
|
options.scales.y.type = yLogarithmic ? 'logarithmic' : 'linear';
|
|
|
|
return (
|
|
<div className="line-chart-container">
|
|
<LineChart
|
|
xtitle="Time"
|
|
ytitle={title}
|
|
suffix={unit}
|
|
legend="bottom"
|
|
color={color}
|
|
data={renderData}
|
|
download={title}
|
|
library={options}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Chart.defaultProps = {
|
|
dataCollections: [],
|
|
data: [],
|
|
title: '',
|
|
yFlipped: false,
|
|
yLogarithmic: false,
|
|
};
|