Compare commits
No commits in common. "4ea3c9e1f46c6a03e3040accc152cff348466002" and "ce99b17fcb6e04a708ba8ef635fc67b7317ab192" have entirely different histories.
4ea3c9e1f4
...
ce99b17fcb
27
package-lock.json
generated
27
package-lock.json
generated
@ -11,13 +11,11 @@
|
||||
"dependencies": {
|
||||
"@fluentui/react": "^8.56.0",
|
||||
"@juggle/resize-observer": "^3.3.1",
|
||||
"chart.js": "^3.7.1",
|
||||
"detect-port": "^1.3.0",
|
||||
"downloadjs": "^1.4.7",
|
||||
"express": "^4.17.3",
|
||||
"gl-matrix": "^3.4.3",
|
||||
"react": "^17.0.2",
|
||||
"react-chartjs-2": "^4.1.0",
|
||||
"react-dnd": "^16.0.1",
|
||||
"react-dnd-html5-backend": "^16.0.1",
|
||||
"react-dom": "^17.0.2",
|
||||
@ -2202,11 +2200,6 @@
|
||||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/chart.js": {
|
||||
"version": "3.7.1",
|
||||
"resolved": "https://registry.npmmirror.com/chart.js/-/chart.js-3.7.1.tgz",
|
||||
"integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
|
||||
},
|
||||
"node_modules/chokidar": {
|
||||
"version": "3.5.3",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
|
||||
@ -6217,15 +6210,6 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-chartjs-2": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/react-chartjs-2/-/react-chartjs-2-4.1.0.tgz",
|
||||
"integrity": "sha512-AsUihxEp8Jm1oBhbEovE+w50m9PVNhz1sfwEIT4hZduRC0m14gHWHd0cUaxkFDb8HNkdMIGzsNlmVqKiOpU74g==",
|
||||
"peerDependencies": {
|
||||
"chart.js": "^3.5.0",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dnd": {
|
||||
"version": "16.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-dnd/-/react-dnd-16.0.1.tgz",
|
||||
@ -10129,11 +10113,6 @@
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"chart.js": {
|
||||
"version": "3.7.1",
|
||||
"resolved": "https://registry.npmmirror.com/chart.js/-/chart.js-3.7.1.tgz",
|
||||
"integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
|
||||
},
|
||||
"chokidar": {
|
||||
"version": "3.5.3",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
|
||||
@ -13221,12 +13200,6 @@
|
||||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"react-chartjs-2": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/react-chartjs-2/-/react-chartjs-2-4.1.0.tgz",
|
||||
"integrity": "sha512-AsUihxEp8Jm1oBhbEovE+w50m9PVNhz1sfwEIT4hZduRC0m14gHWHd0cUaxkFDb8HNkdMIGzsNlmVqKiOpU74g==",
|
||||
"requires": {}
|
||||
},
|
||||
"react-dnd": {
|
||||
"version": "16.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-dnd/-/react-dnd-16.0.1.tgz",
|
||||
|
||||
@ -71,13 +71,11 @@
|
||||
"dependencies": {
|
||||
"@fluentui/react": "^8.56.0",
|
||||
"@juggle/resize-observer": "^3.3.1",
|
||||
"chart.js": "^3.7.1",
|
||||
"detect-port": "^1.3.0",
|
||||
"downloadjs": "^1.4.7",
|
||||
"express": "^4.17.3",
|
||||
"gl-matrix": "^3.4.3",
|
||||
"react": "^17.0.2",
|
||||
"react-chartjs-2": "^4.1.0",
|
||||
"react-dnd": "^16.0.1",
|
||||
"react-dnd-html5-backend": "^16.0.1",
|
||||
"react-dom": "^17.0.2",
|
||||
|
||||
@ -44,11 +44,6 @@ class Setting extends Emitter<ISettingEvents> {
|
||||
*/
|
||||
public layout: Layout = new Layout();
|
||||
|
||||
/**
|
||||
* 是否显示线性图表
|
||||
*/
|
||||
public lineChartType: boolean = false;
|
||||
|
||||
/**
|
||||
* 设置参数
|
||||
*/
|
||||
|
||||
@ -38,7 +38,6 @@ interface IStatusEvent {
|
||||
physicsLoop: number;
|
||||
recordLoop: number;
|
||||
offlineLoop: number;
|
||||
modelUpdate: void;
|
||||
mouseModChange: void;
|
||||
focusObjectChange: void;
|
||||
focusLabelChange: void;
|
||||
@ -133,7 +132,6 @@ class Status extends Emitter<IStatusEvent> {
|
||||
this.actuator.on("loop", (t) => { this.emit("physicsLoop", t) });
|
||||
this.actuator.on("record", (t) => { this.emit("recordLoop", t) });
|
||||
this.actuator.on("offline", (t) => { this.emit("offlineLoop", t) });
|
||||
this.actuator.on("modelUpdate", () => { this.emit("modelUpdate") });
|
||||
|
||||
// 对象变化事件
|
||||
this.model.on("objectChange", () => this.emit("objectChange"));
|
||||
|
||||
@ -170,7 +170,6 @@ const EN_US = {
|
||||
"Panel.Info.Behavior.Details.Parameter.Key.Vec.Z": "{key} Z",
|
||||
"Panel.Info.Clip.List.Error.Nodata": "There is no clip, please click the record button to record, or click the plus sign to create",
|
||||
"Panel.Info.Clip.Details.Error.Nodata": "Specify a clip to view an attribute",
|
||||
"Panel.Info.Statistics.Nodata": "There are no groups in the model or clip",
|
||||
"Info.Hint.Save.After.Close": "Any unsaved progress will be lost. Are you sure you want to continue?",
|
||||
"Info.Hint.Load.File.Title": "Load save",
|
||||
"Info.Hint.Load.File.Intro": "Release to load the dragged save file",
|
||||
|
||||
@ -170,7 +170,6 @@ const ZH_CN = {
|
||||
"Panel.Info.Behavior.Details.Parameter.Key.Vec.Z": "{key} Z 坐标",
|
||||
"Panel.Info.Clip.List.Error.Nodata": "没有剪辑片段，请点击录制按钮录制，或者点击加号创建",
|
||||
"Panel.Info.Clip.Details.Error.Nodata": "请指定一个剪辑片段以查看属性",
|
||||
"Panel.Info.Statistics.Nodata": "模型或剪辑中不存在任何群",
|
||||
"Info.Hint.Save.After.Close": "任何未保存的进度都会丢失, 确定要继续吗?",
|
||||
"Info.Hint.Load.File.Title": "加载存档",
|
||||
"Info.Hint.Load.File.Intro": "释放以加载拽入的存档",
|
||||
|
||||
@ -14,7 +14,6 @@ interface IActuatorEvent {
|
||||
record: number;
|
||||
loop: number;
|
||||
offline: number;
|
||||
modelUpdate: void;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -402,7 +401,6 @@ class Actuator extends Emitter<IActuatorEvent> {
|
||||
}
|
||||
|
||||
this.emit("loop", this.alignTimer);
|
||||
this.emit("modelUpdate");
|
||||
this.alignTimer = 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,62 +2,7 @@
|
||||
|
||||
div.statistics-panel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
|
||||
div.statistics-chart {
|
||||
box-sizing: border-box;
|
||||
padding-top: 10px;
|
||||
max-width: 300px;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.statistics-switch {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
div.switch-button {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
right: -10px;
|
||||
top: -2px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.statistics-panel.dark {
|
||||
|
||||
div.switch-button {
|
||||
background-color: $lt-bg-color-lvl2-dark;
|
||||
color: $lt-font-color-lvl2-dark;
|
||||
}
|
||||
|
||||
div.switch-button:hover {
|
||||
background-color: $lt-bg-color-lvl1-dark;
|
||||
color: $lt-font-color-lvl1-dark;
|
||||
}
|
||||
}
|
||||
|
||||
div.statistics-panel.light {
|
||||
|
||||
div.switch-button {
|
||||
background-color: $lt-bg-color-lvl2-light;
|
||||
color: $lt-font-color-lvl2-light;
|
||||
}
|
||||
|
||||
div.switch-button:hover {
|
||||
background-color: $lt-bg-color-lvl1-light;
|
||||
color: $lt-font-color-lvl1-light;
|
||||
}
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@ -1,252 +1,20 @@
|
||||
import { Component, ReactNode } from "react";
|
||||
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
|
||||
import { useSettingWithEvent, IMixinSettingProps, Themes } from "@Context/Setting";
|
||||
import {
|
||||
Chart as ChartJS, CategoryScale, LinearScale,
|
||||
BarElement, Tooltip, Legend, Decimation,
|
||||
PointElement, LineElement, Title
|
||||
} from 'chart.js';
|
||||
import { Bar, Line } from 'react-chartjs-2';
|
||||
import { Theme } from "@Component/Theme/Theme";
|
||||
import { Icon } from "@fluentui/react";
|
||||
import { Model } from "@Model/Model";
|
||||
import { Group } from "@Model/Group";
|
||||
import { ActuatorModel } from "@Model/Actuator";
|
||||
import { Message } from "@Input/Message/Message";
|
||||
import { Clip, IFrame } from "@Model/Clip";
|
||||
import { useSetting, IMixinSettingProps } from "@Context/Setting";
|
||||
import Theme from "@Component/Theme/Theme";
|
||||
import "./Statistics.scss";
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
BarElement,
|
||||
Tooltip,
|
||||
Legend,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Decimation
|
||||
);
|
||||
|
||||
interface IStatisticsProps {
|
||||
|
||||
}
|
||||
|
||||
@useSettingWithEvent("themes", "language", "lineChartType")
|
||||
@useStatusWithEvent("focusClipChange", "actuatorStartChange", "fileLoad", "modelUpdate", "recordLoop", "individualChange")
|
||||
@useSetting
|
||||
@useStatusWithEvent("labelChange", "focusLabelChange", "labelAttrChange")
|
||||
class Statistics extends Component<IStatisticsProps & IMixinStatusProps & IMixinSettingProps> {
|
||||
|
||||
public barDarkOption = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { legend: {
|
||||
position: 'bottom' as const,
|
||||
labels: { boxWidth: 10, boxHeight: 10, color: 'rgba(255, 255, 255, .5)' }
|
||||
}},
|
||||
scales: {
|
||||
x: { grid: { color: 'rgba(255, 255, 255, .2)' }, title: { color: 'rgba(255, 255, 255, .5)'} },
|
||||
y: { grid: { color: 'rgba(255, 255, 255, .2)', borderDash: [3, 3] }, title: { color: 'rgba(255, 255, 255, .5)'} }
|
||||
}
|
||||
};
|
||||
|
||||
public barLightOption = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { legend: {
|
||||
position: 'bottom' as const,
|
||||
labels: { boxWidth: 10, boxHeight: 10, color: 'rgba(0, 0, 0, .5)' }
|
||||
}},
|
||||
scales: {
|
||||
x: { grid: { color: 'rgba(0, 0, 0, .2)' }, title: { color: 'rgba(0, 0, 0, .5)'} },
|
||||
y: { grid: { color: 'rgba(0, 0, 0, .2)', borderDash: [3, 3] }, title: { color: 'rgba(0, 0, 0, .5)'} }
|
||||
}
|
||||
};
|
||||
|
||||
private modelBarChart(model: Model, theme: boolean) {
|
||||
|
||||
const datasets: any[] = [];
|
||||
const labels: any[] = ["Group"];
|
||||
|
||||
// 收集数据
|
||||
model.objectPool.forEach((obj) => {
|
||||
let label = obj.displayName;
|
||||
let color = `rgb(${obj.color.map((v) => Math.floor(v * 255)).join(",")})`;
|
||||
|
||||
if (obj instanceof Group) {
|
||||
datasets.push({label, data: [obj.individuals.size], backgroundColor: color});
|
||||
}
|
||||
});
|
||||
|
||||
if (datasets.length <= 0) {
|
||||
return <Message i18nKey="Panel.Info.Statistics.Nodata"/>
|
||||
}
|
||||
|
||||
return <Bar
|
||||
data={{datasets, labels}}
|
||||
options={theme ? this.barLightOption : this.barDarkOption }
|
||||
/>
|
||||
}
|
||||
|
||||
private clipBarChart(frame: IFrame, theme: boolean) {
|
||||
|
||||
const datasets: any[] = [];
|
||||
const labels: any[] = ["Group"];
|
||||
|
||||
// 收集数据
|
||||
frame.commands.forEach((command) => {
|
||||
let label = command.name;
|
||||
let color = `rgb(${command.parameter?.color.map((v: number) => Math.floor(v * 255)).join(",")})`;
|
||||
|
||||
if (command.type === "points") {
|
||||
datasets.push({label, data: [(command.data?.length ?? 0) / 3], backgroundColor: color});
|
||||
}
|
||||
});
|
||||
|
||||
if (datasets.length <= 0) {
|
||||
return <Message i18nKey="Panel.Info.Statistics.Nodata"/>
|
||||
}
|
||||
|
||||
return <Bar
|
||||
data={{datasets, labels}}
|
||||
options={ theme ? this.barLightOption : this.barDarkOption }
|
||||
/>
|
||||
}
|
||||
|
||||
public lineDarkOption = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom' as const,
|
||||
labels: { boxWidth: 10, boxHeight: 10, color: 'rgba(255, 255, 255, .5)' },
|
||||
decimation: { enabled: true }
|
||||
},
|
||||
decimation: { enabled: true, algorithm: "lttb" as const, samples: 100 }
|
||||
},
|
||||
scales: {
|
||||
x: { grid: { color: 'rgba(255, 255, 255, .2)' }, type: "linear", title: { color: 'rgba(255, 255, 255, .5)'} },
|
||||
y: { grid: { color: 'rgba(255, 255, 255, .2)', borderDash: [3, 3] }, title: { color: 'rgba(255, 255, 255, .5)'} }
|
||||
}
|
||||
};
|
||||
|
||||
public lineLightOption = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom' as const,
|
||||
labels: { boxWidth: 10, boxHeight: 10, color: 'rgba(0, 0, 0, .5)' },
|
||||
},
|
||||
decimation: { enabled: true, algorithm: "lttb" as const, samples: 100 }
|
||||
},
|
||||
scales: {
|
||||
x: { grid: { color: 'rgba(0, 0, 0, .2)' }, title: { color: 'rgba(0, 0, 0, .5)'} },
|
||||
y: { grid: { color: 'rgba(0, 0, 0, .2)', borderDash: [3, 3] }, title: { color: 'rgba(0, 0, 0, .5)'} }
|
||||
}
|
||||
};
|
||||
|
||||
private clipLineChart(clip: Clip, theme: boolean) {
|
||||
|
||||
type IDataSet = {label: string, data: number[], backgroundColor: string, id: string};
|
||||
const datasets: IDataSet[] = [];
|
||||
const labels: number[] = [];
|
||||
|
||||
// 收集数据
|
||||
clip.frames.forEach((frame) => {
|
||||
labels.push(frame.process);
|
||||
frame.commands.forEach((command) => {
|
||||
|
||||
if (command.type !== "points") return;
|
||||
|
||||
let findKey: IDataSet | undefined;
|
||||
for (let i = 0; i < datasets.length; i++) {
|
||||
if (datasets[i].id === command.id) {
|
||||
findKey = datasets[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (findKey) {
|
||||
findKey.data.push((command.data?.length ?? 0) / 3);
|
||||
} else {
|
||||
findKey = {} as any;
|
||||
findKey!.data = [(command.data?.length ?? 0) / 3];
|
||||
findKey!.label = command.name ?? "";
|
||||
findKey!.backgroundColor = `rgb(${command.parameter?.color.map((v: number) => Math.floor(v * 255)).join(",")})`;
|
||||
findKey!.id = command.id;
|
||||
datasets.push(findKey!);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
if (datasets.length <= 0) {
|
||||
return <Message i18nKey="Panel.Info.Statistics.Nodata"/>
|
||||
}
|
||||
|
||||
return <Line
|
||||
options={ theme ? this.lineLightOption : this.lineDarkOption }
|
||||
data={{labels, datasets:[{data: [1], }] }}
|
||||
/>;
|
||||
}
|
||||
|
||||
private renderChart() {
|
||||
|
||||
let themes = this.props.setting?.themes === Themes.light;
|
||||
let lineChartType = this.props.setting?.lineChartType;
|
||||
|
||||
// 播放模式
|
||||
if (this.props.status?.focusClip) {
|
||||
if (this.props.status.actuator.playClip && lineChartType) {
|
||||
return this.clipLineChart(this.props.status.actuator.playClip, themes);
|
||||
}
|
||||
if (this.props.status.actuator.playFrame) {
|
||||
return this.clipBarChart(this.props.status.actuator.playFrame, themes);
|
||||
}
|
||||
}
|
||||
|
||||
// 正在录制中
|
||||
else if (
|
||||
this.props.status?.actuator.mod === ActuatorModel.Record ||
|
||||
this.props.status?.actuator.mod === ActuatorModel.Offline
|
||||
) {
|
||||
if (this.props.status.actuator.recordClip && lineChartType) {
|
||||
return this.clipLineChart(this.props.status.actuator.recordClip, themes);
|
||||
}
|
||||
return this.modelBarChart(this.props.status.model, themes);
|
||||
}
|
||||
|
||||
// 主时钟运行
|
||||
else if (this.props.status) {
|
||||
return this.modelBarChart(this.props.status.model, themes);
|
||||
}
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
return <Theme className="statistics-panel">
|
||||
|
||||
{
|
||||
(
|
||||
this.props.status?.focusClip ||
|
||||
this.props.status?.actuator.mod === ActuatorModel.Record ||
|
||||
this.props.status?.actuator.mod === ActuatorModel.Offline
|
||||
) ?
|
||||
|
||||
<div className="statistics-switch">
|
||||
<div className="switch-button" onClick={() => {
|
||||
this.props.setting?.setProps("lineChartType", !this.props.setting?.lineChartType);
|
||||
}}>
|
||||
<Icon iconName={
|
||||
this.props.setting?.lineChartType ? "BarChartVertical" : "LineChart"
|
||||
}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
: null
|
||||
}
|
||||
|
||||
<div className="statistics-chart">
|
||||
{ this.renderChart() }
|
||||
</div>
|
||||
</Theme>;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user