package-lock.json

@@ -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",

package.json

@@ -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",

source/Context/Setting.tsx

@@ -44,11 +44,6 @@ class Setting extends Emitter<ISettingEvents> {
      */
     public layout: Layout = new Layout();
 
-    /**
-     * 是否显示线性图表
-     */
-    public lineChartType: boolean = false;
-
     /**
      * 设置参数
      */

source/Context/Status.tsx

@@ -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"));

source/Localization/EN-US.ts

@@ -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",

source/Localization/ZH-CN.ts

@@ -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": "释放以加载拽入的存档",

source/Model/Actuator.ts

@@ -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;
 					}
 				}

source/Panel/Statistics/Statistics.scss

@@ -2,62 +2,7 @@
 
 div.statistics-panel {
     width: 100%;
-    height: 100%;
     min-height: 100%;
-
+    padding: 10px;
-    div.statistics-chart {
+    box-sizing: border-box;
-        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;
-    }
 }

source/Panel/Statistics/Statistics.tsx

@@ -1,252 +1,20 @@
 import { Component, ReactNode } from "react";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
-import { useSettingWithEvent, IMixinSettingProps, Themes } from "@Context/Setting";
+import { useSetting, IMixinSettingProps } from "@Context/Setting";
-import {
+import Theme from "@Component/Theme/Theme";
-    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 "./Statistics.scss";
 
-ChartJS.register(
-    CategoryScale,
-    LinearScale,
-    BarElement,
-    Tooltip,
-    Legend,
-    PointElement,
-    LineElement,
-    Title,
-    Decimation
-);
-
 interface IStatisticsProps {
 
 }
 
-@useSettingWithEvent("themes", "language", "lineChartType")
+@useSetting
-@useStatusWithEvent("focusClipChange", "actuatorStartChange", "fileLoad", "modelUpdate", "recordLoop", "individualChange")
+@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>;
     }
 }