@prmichaelsen/acp-visualizer 0.10.0 → 0.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -52,6 +52,16 @@ function buildEstimateData(data: ProgressData): MilestoneEstimate[] {
|
|
|
52
52
|
|
|
53
53
|
export function EstimateChart({ data }: EstimateChartProps) {
|
|
54
54
|
const chartData = buildEstimateData(data)
|
|
55
|
+
const [isMobile, setIsMobile] = useState(false)
|
|
56
|
+
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
const checkMobile = () => {
|
|
59
|
+
setIsMobile(window.innerWidth < 1024)
|
|
60
|
+
}
|
|
61
|
+
checkMobile()
|
|
62
|
+
window.addEventListener('resize', checkMobile)
|
|
63
|
+
return () => window.removeEventListener('resize', checkMobile)
|
|
64
|
+
}, [])
|
|
55
65
|
|
|
56
66
|
if (chartData.length === 0) {
|
|
57
67
|
return null
|
|
@@ -59,15 +69,22 @@ export function EstimateChart({ data }: EstimateChartProps) {
|
|
|
59
69
|
|
|
60
70
|
const hasActuals = chartData.some((d) => d.actual !== null)
|
|
61
71
|
|
|
72
|
+
// Mobile: LR (horizontal bars), Desktop: TB (vertical bars) for better space usage
|
|
73
|
+
const layout = isMobile ? 'vertical' : 'vertical'
|
|
74
|
+
const chartHeight = isMobile
|
|
75
|
+
? Math.max(200, chartData.length * 50 + 40) // LR: height scales with items
|
|
76
|
+
: Math.max(300, chartData.length * 50 + 40)
|
|
77
|
+
const yAxisWidth = isMobile ? 120 : 180
|
|
78
|
+
|
|
62
79
|
return (
|
|
63
80
|
<div className="bg-gray-900/50 border border-gray-800 rounded-xl p-5">
|
|
64
81
|
<h3 className="text-sm font-semibold text-gray-300 mb-4">
|
|
65
82
|
Estimated vs Actual Hours
|
|
66
83
|
</h3>
|
|
67
|
-
<ResponsiveContainer width="100%" height={
|
|
84
|
+
<ResponsiveContainer width="100%" height={chartHeight}>
|
|
68
85
|
<BarChart
|
|
69
86
|
data={chartData}
|
|
70
|
-
layout=
|
|
87
|
+
layout={layout}
|
|
71
88
|
margin={{ top: 5, right: 20, bottom: 5, left: 10 }}
|
|
72
89
|
>
|
|
73
90
|
<CartesianGrid strokeDasharray="3 3" stroke="#1f2937" horizontal={false} />
|
|
@@ -81,7 +98,7 @@ export function EstimateChart({ data }: EstimateChartProps) {
|
|
|
81
98
|
<YAxis
|
|
82
99
|
type="category"
|
|
83
100
|
dataKey="name"
|
|
84
|
-
width={
|
|
101
|
+
width={yAxisWidth}
|
|
85
102
|
tick={{ fill: '#9ca3af', fontSize: 11 }}
|
|
86
103
|
tickLine={false}
|
|
87
104
|
axisLine={{ stroke: '#374151' }}
|