Merge pull request #24 from warioddly/GRA-17

Implement Echarts Gradient

Author: warioddly

example/lib/charts/basic_area_chart.dart

@@ -35,41 +35,59 @@ class _BasicAreaChartState extends State<BasicAreaChart> {
   Widget build(BuildContext context) {
     return GraphifyView(
       controller: controller,
-      initialOptions: const {
-        "xAxis": {
+      initialOptions: {
+        "xAxis": const {
           "type": "category",
           "boundaryGap": false,
           "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
         },
-        "yAxis": {
+        "yAxis": const {
           "type": "value"
         },
-        'tooltip': {
+        'tooltip': const {
           'trigger': 'axis',
         },
         "series": [
           {
-            "data": [150, 230, 224, 218, 135, 147, 260],
+            "data": const [150, 230, 224, 218, 135, 147, 260],
             "type": "line",
             'smooth': true,
             'areaStyle': {
-              'color': {
-                'type': 'RadialGradient',
-                'x': 0.1,
-                'y': 0.6,
-                'r': 1,
-                'colorStops': [
-                  {
-                    'color': 'rgba(255, 145, 124, 0.1)',
-                    'offset': 0,
-                  },
-                  {
-                    'color': 'rgba(255, 145, 124, 0.9)',
-                    'offset': 1,
-                  },
+              'color': const GraphifyLinearGradient(
+                x: 0.1,
+                y: 0.6,
+                x2: 0.9,
+                y2: 0.1,
+                colorStops: [
+                  GraphifyGradientColorStop(
+                    color: Colors.green,
+                    offset: 1,
+                  ),
+                   GraphifyGradientColorStop(
+                    color: Colors.red,
+                    offset: .4,
+                  ),
                 ],
-              },
+              ).toJson()
             },
+            // 'areaStyle': {
+            //   'color': {
+            //     'type': 'RadialGradient',
+            //     'x': 0.1,
+            //     'y': 0.6,
+            //     'r': 1,
+            //     'colorStops': [
+            //       {
+            //         'color': 'rgba(255, 145, 124, 0.1)',
+            //         'offset': 0,
+            //       },
+            //       {
+            //         'color': 'rgba(255, 145, 124, 0.9)',
+            //         'offset': 1,
+            //       },
+            //     ],
+            //   },
+            // },
           }
         ]
       },

lib/graphify.dart

@@ -6,3 +6,7 @@ export 'src/controller/implements/facade.dart'
 export 'src/view/implements/facade.dart'
     if (dart.library.io) 'src/view/implements/mobile.dart'
     if (dart.library.html) 'src/view/implements/web.dart';
+
+export 'src/utils/gradient/graphify_gradient.dart';
+export 'src/utils/gradient/graphify_linear_gradient.dart';
+export 'src/utils/gradient/graphify_radial_gradient.dart';

lib/src/utils/gradient/graphify_gradient.dart

@@ -0,0 +1,51 @@
+import 'dart:ui';
+
+abstract class GraphifyGradient {
+  const GraphifyGradient({
+    this.colorStops = const [],
+    this.global = false,
+    this.id,
+  });
+
+  String get type;
+
+  final num? id;
+  final List<GraphifyGradientColorStop> colorStops;
+  final bool global;
+
+  void addColorStop(num offset, Color color) {
+    colorStops.add(
+      GraphifyGradientColorStop(
+        offset: offset,
+        color: color,
+      ),
+    );
+  }
+
+  Map<String, dynamic> toJson() {
+    return <String, dynamic>{
+      if (id != null) 'id': id,
+      'type': type,
+      'colorStops': colorStops.map((e) => e.toJson()).toList(),
+      'global': global,
+    };
+  }
+}
+
+class GraphifyGradientColorStop {
+  const GraphifyGradientColorStop({
+    required this.offset,
+    required this.color,
+  });
+
+  final num offset;
+  final Color color;
+
+  Map<String, dynamic> toJson() {
+    return <String, dynamic>{
+      'offset': offset,
+      'color':
+          'rgba(${(color.r * 255).toInt()}, ${(color.g * 255).toInt()}, ${(color.b * 255).toInt()}, ${color.a})',
+    };
+  }
+}

lib/src/utils/gradient/graphify_linear_gradient.dart

@@ -0,0 +1,34 @@
+import 'package:graphify/src/utils/gradient/graphify_gradient.dart';
+
+class GraphifyLinearGradient extends GraphifyGradient {
+
+  const GraphifyLinearGradient({
+    this.x = 0,
+    this.y = 0,
+    this.x2 = 1,
+    this.y2 = 0,
+    super.colorStops,
+    super.global,
+    super.id,
+  });
+
+  @override
+  String get type => 'linear';
+
+  final num x;
+  final num y;
+  final num x2;
+  final num y2;
+
+  @override
+  Map<String, dynamic> toJson() {
+    return <String, dynamic>{
+      ...super.toJson(),
+      'x': x,
+      'y': y,
+      'x2': x2,
+      'y2': y2,
+    };
+  }
+
+}

lib/src/utils/gradient/graphify_radial_gradient.dart

@@ -0,0 +1,30 @@
+import 'package:graphify/src/utils/gradient/graphify_gradient.dart';
+
+class GraphifyRadialGradient extends GraphifyGradient {
+
+  const GraphifyRadialGradient({
+    this.x = .5,
+    this.y = .5,
+    this.r = .5,
+    super.colorStops,
+    super.global,
+    super.id,
+  });
+
+  @override
+  String get type => 'radial';
+
+  final num x;
+  final num y;
+  final num r;
+
+  @override
+  Map<String, dynamic> toJson() {
+    return <String, dynamic>{
+      ...super.toJson(),
+      'x': x,
+      'y': y,
+      'r': r,
+    };
+  }
+}