Add statistics panel

2022-05-25 22:00:13 +08:00
parent ce99b17fcb
commit 2dbbd0952a
9 changed files with 220 additions and 6 deletions
@@ -2,7 +2,62 @@

 div.statistics-panel {
    width: 100%;
+    height: 100%;
    min-height: 100%;
-    padding: 10px;
-    box-sizing: border-box;
+
+    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;
+    }
 }
@@ -1,20 +1,139 @@
 import { Component, ReactNode } from "react";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
-import { useSetting, IMixinSettingProps } from "@Context/Setting";
-import Theme from "@Component/Theme/Theme";
+import { useSettingWithEvent, IMixinSettingProps, Themes } from "@Context/Setting";
+import {
+    Chart as ChartJS, CategoryScale, LinearScale,
+    BarElement, Tooltip, Legend
+} from 'chart.js';
+import { Bar } 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 "./Statistics.scss";

+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Tooltip,
+    Legend
+);
+
+enum ChartType {
+
+}
+
 interface IStatisticsProps {

 }

-@useSetting
-@useStatusWithEvent("labelChange", "focusLabelChange", "labelAttrChange")
+@useSettingWithEvent("themes", "language", "lineChartType")
+@useStatusWithEvent("focusClipChange", "actuatorStartChange", "fileLoad", "modelUpdate", "individualChange")
 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 renderChart() {
+
+        let themes = this.props.setting?.themes === Themes.light;
+
+        // 播放模式
+        if (this.props.status?.focusClip) {
+            return this.modelBarChart(this.props.status.model, themes);
+        }
+
+        // 正在录制中
+        else if (
+            this.props.status?.actuator.mod === ActuatorModel.Record ||
+			this.props.status?.actuator.mod === ActuatorModel.Offline
+        ) {
+            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>;
    }
 }