You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+15-32Lines changed: 15 additions & 32 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# FlutterCirclePackChart
2
2
3
-
A powerful, interactive, and highly customizable Circle Pack Chart (Circular Treemap) library for Flutter. Built with performance and user experience in mind, it features immersive drill-down navigation and a responsive, structured label system.
3
+
A powerful, interactive, and highly customizable Circle Pack Chart (Circular Treemap) library for Flutter. Built with performance and user experience in mind, it features immersive drill-down navigation and a responsive, data-driven label system.
@@ -10,12 +10,12 @@ A powerful, interactive, and highly customizable Circle Pack Chart (Circular Tre
10
10
-**♾️ Infinite Zoom Context:** Sibling nodes remain visible and partially overflow the square viewport during transitions, maintaining clear hierarchical context.
11
11
-**🔄 Bidirectional Navigation:** Seamlessly supports both drill-in (explosion) and drill-out (implosion) animations for a natural, physical feel.
12
12
-**📏 Professional Label System:**
13
-
-**Structured Data:** Use `label` for the name and `upperLabel` for monetary valuesor subtitles (rendered larger and bold).
13
+
-**Structured Data:** Use `label` for the name and `formattedValue` for monetary values, percentages, or custom strings (rendered larger and bold on top).
14
14
-**Guaranteed Visibility:** Enforces a minimum circle size to ensure every item has a legible label.
15
15
-**Anti-Scaled Consistency:** Labels maintain a constant visual size on screen regardless of the zoom level.
16
-
-**Clean Aesthetic:**Flat, normal-weight text with automatic single-line ellipsis for long names.
17
-
-**📋 Dynamic Legend:**Includes a built-in vertical legend component that automatically updates to reflect the items, colors, and values of the currently focused level.
18
-
-**🎨 Highly Customizable:**Adjust animation speed, minimum radius ratios, font size factors, and colors to match your app's brand.
16
+
-**Visibility Toggle:**Control whether values are shown inside circles using the `showValue` flag.
17
+
-**✨ Dynamic Opacity:**Automatically scales child circle opacity based on their relative values, visually highlighting more important data points.
18
+
-**📋 Dynamic Legend:**Includes a built-in vertical legend component that automatically updates to reflect labels and formatted values of the currently focused level.
19
19
20
20
## 📦 Installation
21
21
@@ -25,12 +25,10 @@ To add **flutter_circle_pack_chart** to your project, run:
25
25
flutter pub add flutter_circle_pack_chart
26
26
```
27
27
28
-
This will add the latest version of the package to your `pubspec.yaml`.
29
-
30
28
## 🚀 Getting Started
31
29
32
30
### 1. Define your data
33
-
Create a hierarchy of `CircleNode` objects. You can use both `label` and `upperLabel`to display structured data on two lines:
31
+
Create a hierarchy of `CircleNode` objects. Use `formattedValue`to display custom-formatted data like currency:
Place the `FlutterCirclePackChart` in your widget tree. Optionally use a `FlutterCirclePackChartController` for advanced navigation and legend support.
52
+
Place the `FlutterCirclePackChart` in your widget tree.
63
53
64
54
```dart
65
55
// Initialize the controller
66
56
final controller = FlutterCirclePackChartController(root: root);
67
57
68
58
// In your build method
69
-
Column(
70
-
children: [
71
-
Expanded(
72
-
child: FlutterCirclePackChart(
73
-
root: root,
74
-
controller: controller,
75
-
),
76
-
),
77
-
// Add the dynamic legend (shows primary labels only)
This major release refactors the data model and rendering logic to support structured value display and dynamic visual effects based on data importance. It introduces breaking changes to `CircleNode` for a cleaner API.
5
+
6
+
## Functional Requirements
7
+
-**Data Model Refactor (`CircleNode`):**
8
+
- Remove `upperLabel`.
9
+
- Add `formattedValue` (String) for displaying custom-formatted data (currency, percentages, etc.).
10
+
- Primary `label` remains for the descriptive name.
11
+
-`value` (double) continues to drive sizing and legend totals.
12
+
-**Rendering Refinements:**
13
+
-**Value Visibility Flag:** Add `showValue` flag to the widget to toggle displaying the value (preferring `formattedValue`) inside the circles.
14
+
-**Dynamic Opacity:** Implement opacity scaling for children based on their relative values (larger items are more opaque, smaller items are more subtle).
15
+
-**Independent Styling:** Maintain larger/bold styling for the value line when displayed in the circle.
16
+
-**Legend Update:** Sync with the new model, ensuring the value shown matches the numeric `value` or `formattedValue`.
17
+
18
+
## Breaking Changes
19
+
-`CircleNode` constructor parameters have changed.
20
+
-`secondaryLabel` / `upperLabel` are replaced by `formattedValue`.
0 commit comments