Files
syncrow-web/lib/pages/analytics/modules/occupancy/widgets/occupancy_painter.dart
Faris Armoush 49e93329c8 Sp 1511 fe build occupancy heat map weekly monthly intensity view (#178)
* set the default tab to occupancy for ease of development.

* Implemented an initial design for the occupancy chart.

* Add Occupacy model and service for occupancy data handling.

* Created `OccupancyBloc`.

* Implemented the sidebar of Occupancy view.

* Moved `OccupancyEndSideBar` widget to its own file.

* Removed unnecessary widgets.

* Matched the `OccupancyChart` with the figma design.

* Added `AnalyticsDateFilterButton` to `OccupancyChartBox`.

* Hides `AnalyticsDateFilterButton` that is in the page header, when the selected tab isn't `AnalyticsPageTab.energyManagement`.

* Added animation to`AnalyticsDateFilterButton`.

* modified the implementation of `FakeOccupacyService` to clamp all the generated values to less than a 100.

* Injected `OccupancyBloc` into `AnalyticsPage`.

* Made `OccupancyChart` read its data from `OccupancyBloc`.

* Refactor AnalyticsCommunitiesSidebar to load data based on selected tab and implement loadEnergyManagementData method

* Refactor Analytics views to use StatefulWidget and load data in initState

* Created `OccupancyHeatMapModel`.

* Add FakeOccupancyHeatMapService implementation.

* Created `OccupancyHeatMapBloc`.

* Injected `OccupancyHeatMapBloc` into `AnalyticsPage`.

* Add OccupancyHeatMapBox widget and integrate into AnalyticsOccupancyView

* Matching the heat map with the design, and added week days.

* Made the HeatMap cells have a dashed border.

* shows months.

* responsiveness.

* Integrate OccupancyHeatMapBloc and update OccupancyHeatMapBox to display heat map data with error handling

* Integrate OccupancyHeatMapBloc and update OccupancyHeatMapBox to display heat map data with error handling

* made the heatmap loading fast af by using painters instead of individually creating a widget for every single event.

* Extracted `OccupancyHeatMapMonths` into its own widgte.

* Moved `OccupancyHeatMapMonths` to its own file.

* Adjusted design of `OccupancyHeatMapMonths`.

* Adjust layout flex properties for `OccupancyEndSideBar` and its parent column in `AnalyticsOccupancyView`.

* moved `OccupancyPaintItem` to `OccupancyPainter`s file.

* removed comments from `OccupancyPainter`.

* used color.withValues instead of .withOpacity.

* re-added `OccupancyHeatMapGradient`.

* Revert initial tab to `energyManagement`.

* Made datepicker dynamic for multiple states.

* Add year picker functionality to date filter button and implement dynamic date selection

* Align date filter button to the end in occupancy chart and heat map boxes for improved UI consistency.

* Enahnced color of border in `OccupancyPainter`.

* Add ClearOccupancyHeatMapEvent to reset heat map state and update occupancy data helper to trigger event on empty selections

* show percentage of value in tool tip of `OccupancyChart`.
2025-05-11 16:58:13 +03:00

85 lines
2.4 KiB
Dart

import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';
class OccupancyPaintItem {
final int index;
final int value;
const OccupancyPaintItem({required this.index, required this.value});
}
class OccupancyPainter extends CustomPainter {
OccupancyPainter({
required this.items,
required this.maxValue,
});
final List<OccupancyPaintItem> items;
final int maxValue;
static const double cellSize = 16.0;
@override
void paint(Canvas canvas, Size size) {
final Paint fillPaint = Paint();
final Paint borderPaint = Paint()
..color = ColorsManager.grayBorder.withValues(alpha: 0.4)
..style = PaintingStyle.stroke;
for (final item in items) {
final column = item.index ~/ 7;
final row = item.index % 7;
final x = column * cellSize;
final y = row * cellSize;
fillPaint.color = _getColor(item.value);
final rect = Rect.fromLTWH(x, y, cellSize, cellSize);
canvas.drawRect(rect, fillPaint);
_drawDashedLine(
canvas,
Offset(x, y),
Offset(x + cellSize, y),
borderPaint,
);
_drawDashedLine(
canvas,
Offset(x, y + cellSize),
Offset(x + cellSize, y + cellSize),
borderPaint,
);
canvas.drawLine(Offset(x, y), Offset(x, y + cellSize), borderPaint);
canvas.drawLine(
Offset(x + cellSize, y), Offset(x + cellSize, y + cellSize), borderPaint);
}
}
void _drawDashedLine(Canvas canvas, Offset start, Offset end, Paint paint) {
const double dashWidth = 2.0;
const double dashSpace = 4.0;
final double totalLength = (end - start).distance;
final Offset direction = (end - start) / (end - start).distance;
double currentLength = 0.0;
while (currentLength < totalLength) {
final Offset dashStart = start + direction * currentLength;
final double nextLength = currentLength + dashWidth;
final Offset dashEnd =
start + direction * (nextLength < totalLength ? nextLength : totalLength);
canvas.drawLine(dashStart, dashEnd, paint);
currentLength = nextLength + dashSpace;
}
}
Color _getColor(int value) {
if (maxValue == 0) return ColorsManager.vividBlue.withValues(alpha: 0);
final opacity = value.clamp(0, maxValue) / maxValue;
return ColorsManager.vividBlue.withValues(alpha: opacity);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}