Ramin/update indicators documentations (#313)

README.md

@@ -250,7 +250,8 @@ ChartLocalization.load(locale);
 
 ### DerivChart
 
-A wrapper around the `chart` widget which provides the UI to add/remove indicators and to manage saving/restoring selected ones on storage.
+A wrapper around the `chart` widget provides the functionality to add/remove/update indicators and to manage saving/restoring selected ones on storage.
+To learn more about how we can customize the indicators feature using `DerivChart` check [this documentation](/docs/deriv_chart_widget_usage.md).
 
 #### Usage:
 

docs/deriv_chart_widget_usage.md

@@ -0,0 +1,64 @@
+### How to use DerivChart chart component
+
+`DerivChart` is a wrapper around the `chart` widget that provides the ability to add/remove indicators and manage saving/restoring added ones in storage.
+By default, this widget shows two buttons at the top left to add/remove indicators and drawing tools. This can be used when you don't need to customize the look and functionalities of the menus and dialogs for adding/removing indicators and changing their settings and want to use the chart's default menu interfaces.
+
+We can also implement our own interface to do all the above and integrate it with the `DerivChart` component.
+This can be done by creating an instance of `AddOnsRepository` and passing it to the chart. For example, in the case of indicators, we can create an instance of `AddOnsRepository<IndicatorConfig>` as shown below:
+
+```Dart
+_indicatorsRepo = AddOnsRepository<IndicatorConfig>(
+      // Is called when fetching the saved indicators from the shared preferences.
+      // To handle how an IndicatorConfig object should be created from a saved JSON object.
+      createAddOn: (Map<String, dynamic> map) => IndicatorConfig.fromJson(map),
+      onEditCallback: (int index) {
+       // handle edit of an indicator on index from _indicatorsRepo.items
+      },
+      // A string acts as a key for the set of indicators that are saved. so we can have a separate set of saved indicators per key
+      // For example we can have saved indicators per symbol if we pass the symbol code every time it changes to the indicator repo.
+      sharedPrefKey: 'R_100',
+    );
+```
+
+After creating the instance you can pass it to the DerivChart component.
+
+```Dart
+ DerivChart(
+      indicatorsRepo: _indicatorsRepo,
+      ...
+      ...
+```
+
+To load the saved indicators we should call the below method and pass the instance of SharedPref:
+
+```Dart
+_indicatorsRepo.loadFromPrefs(
+      await SharedPreferences.getInstance(),
+      'R_100',
+);
+```
+
+`AddOnsRepository` is a subtype of `ChangeNotifier` so when we call this method, later `DerivChart` will be informed about the change in the list of indicators.
+
+#### Add/remove/update indicators
+Now that we have the instance of `AddsOnRepository` we can use it to know the current list of added indicators. and use its method to add/remove/update, from our menu interfaces.
+
+To add:
+
+```Dart
+_indicatorRepo.add(MACDIndicatorConfig());
+```
+
+To remove: 
+
+`index` is the index of the indicator item in `_indicatorRepo.items` list.
+
+```Dart
+_indicatorRepo.removeAt(index);
+```
+
+To update:
+
+```Dart
+ repo.updateAt(index, updatedConfig),
+```

lib/src/add_ons/add_ons_repository.dart

@@ -9,18 +9,23 @@ import 'package:shared_preferences/shared_preferences.dart';
 typedef CreateAddOn<T extends AddOnConfig> = T Function(
     Map<String, dynamic> map);
 
+/// Called when the edit icon is clicked on an add-on.
+typedef OnEditAddOn = Function(int index);
+
 /// Holds indicators/drawing tools that were added to the Chart during runtime.
 class AddOnsRepository<T extends AddOnConfig> extends ChangeNotifier
     implements Repository<T> {
   /// Initializes
   AddOnsRepository({
     required this.createAddOn,
-    required this.currentSymbol,
+    required this.sharedPrefKey,
     this.onEditCallback,
   }) : _addOns = <T>[];
 
-  /// Current symbol.
-  String currentSymbol;
+  /// Key String acts as a key for the set of indicators that are saved.
+  ///
+  /// We can have separate set of saved indicators per key.
+  String sharedPrefKey;
 
   /// List containing addOns
   final List<T> _addOns;
@@ -31,18 +36,18 @@ class AddOnsRepository<T extends AddOnConfig> extends ChangeNotifier
   List<T> get items => _addOns;
 
   /// Storage key of saved indicators/drawing tools.
-  String get addOnsKey => 'addOns_${T.toString()}_$currentSymbol';
+  String get addOnsKey => 'addOns_${T.toString()}_$sharedPrefKey';
 
   /// Called to create an AddOnConfig object from a map.
   CreateAddOn<T> createAddOn;
 
   /// Called when the edit icon is clicked.
-  VoidCallback? onEditCallback;
+  OnEditAddOn? onEditCallback;
 
   /// Loads user selected indicators or drawing tools from shared preferences.
   void loadFromPrefs(SharedPreferences prefs, String symbol) {
     _prefs = prefs;
-    currentSymbol = symbol;
+    sharedPrefKey = symbol;
 
     items.clear();
 
@@ -75,7 +80,7 @@ class AddOnsRepository<T extends AddOnConfig> extends ChangeNotifier
   /// Called when the edit icon is clicked.
   @override
   void editAt(int index) {
-    onEditCallback?.call();
+    onEditCallback?.call(index);
   }
 
   /// Updates indicator or drawing tool at [index] and updates storage.
@@ -89,8 +94,6 @@ class AddOnsRepository<T extends AddOnConfig> extends ChangeNotifier
     notifyListeners();
   }
 
-
-
   /// Removes indicator/drawing tool at [index] from repository and
   /// updates storage.
   @override
@@ -103,7 +106,6 @@ class AddOnsRepository<T extends AddOnConfig> extends ChangeNotifier
     notifyListeners();
   }
 
-
   /// Removes all indicator/drawing tool from repository and
   /// updates storage.
   @override

lib/src/deriv_chart/deriv_chart.dart

@@ -202,15 +202,15 @@ class _DerivChartState extends State<DerivChart> {
   void _initRepos() {
     _indicatorsRepo = AddOnsRepository<IndicatorConfig>(
       createAddOn: (Map<String, dynamic> map) => IndicatorConfig.fromJson(map),
-      onEditCallback: showIndicatorsDialog,
-      currentSymbol: widget.activeSymbol,
+      onEditCallback: (_) => showIndicatorsDialog(),
+      sharedPrefKey: widget.activeSymbol,
     );
 
     _drawingToolsRepo = AddOnsRepository<DrawingToolConfig>(
       createAddOn: (Map<String, dynamic> map) =>
           DrawingToolConfig.fromJson(map),
-      onEditCallback: showDrawingToolsDialog,
-      currentSymbol: widget.activeSymbol,
+      onEditCallback: (_) => showDrawingToolsDialog(),
+      sharedPrefKey: widget.activeSymbol,
     );
     if (widget.drawingToolsRepo == null) {
       loadSavedIndicatorsAndDrawingTools();