v2.2.0

entronad · May 15, 2023 · e987cad · e987cad
1 parent e8d19fd
commit e987cad
Show file tree

Hide file tree

Showing 22 changed files with 315 additions and 245 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## 2.2.0
+
+**2023-05-15**
+
+- Add `RepaintBoundary` to reduce chart repainting: https://github.com/entronad/graphic/pull/220
+- Fix that all items use the same shape params: https://github.com/entronad/graphic/issues/221
+
 ## 2.1.0
 
 **2023-04-20**

diff --git a/DEVLOG.md b/DEVLOG.md
@@ -512,4 +512,12 @@ Tuple value 应该还是不接受null：1.这是dart null-safety 倡导的原则
 
 至少目前，参数定义的原则涉及多个维度的还是以list定义为主，而不是分开 aaX, aaY这样，比如 CrosshairCuide, list 成员可以为null，以达到一个设置一个不设置的效果，不要搞单独元素指代两个相同这种，取数用 [0] [1]。
 
-之前 scaleEnd 和 longPressEnd 是不含 localMoveStart 的，可能是因为当时为了和flutter的习惯一致。现在的原则是参数尽量给到，而且这里也似乎确实有用。但是它的类目太多太杂，也不用都加上，就update和end加上。
+之前 scaleEnd 和 longPressEnd 是不含 localMoveStart 的，可能是因为当时为了和flutter的习惯一致。现在的原则是参数尽量给到，而且这里也似乎确实有用。但是它的类目太多太杂，也不用都加上，就update和end加上。
+
+vis lib 的核心价值？核心需求？满足奇怪的vis设计需求
+
+echarts的top是放的components, series, global settings。当它setting时，通过key来进行diff，数据也是通过key来进行diff
+
+坐标系的关联？比如一个直接坐标系上再放一个极坐标系，极坐标系的圆心与直角坐标系
+
+item.shape 属性提示我们，似乎还是应该搞个绘制单个的方法，以强调每个数据项图形的独特性？
diff --git a/example/lib/pages/animation.dart b/example/lib/pages/animation.dart
@@ -76,7 +76,9 @@ class AnimationPageState extends State<AnimationPage> {
           {'genre': 'Other', 'sold': rdm.nextInt(300)},
         ];
 
-        scatterAnimData = scatterAnimData.map((d) => [d[0], d[1], d[2], d[3], -1 * d[4]]).toList();
+        scatterAnimData = scatterAnimData
+            .map((d) => [d[0], d[1], d[2], d[3], -1 * d[4]])
+            .toList();
       });
     });
 
@@ -97,7 +99,12 @@ class AnimationPageState extends State<AnimationPage> {
         title: const Text('Animation'),
       ),
       backgroundColor: Colors.white,
-      floatingActionButton: FloatingActionButton(onPressed: () => setState(() {rebuild = true;}), child: Icon(Icons.refresh),),
+      floatingActionButton: FloatingActionButton(
+        onPressed: () => setState(() {
+          rebuild = true;
+        }),
+        child: Icon(Icons.refresh),
+      ),
       body: SingleChildScrollView(
         child: Center(
           child: Column(
@@ -132,13 +139,18 @@ class AnimationPageState extends State<AnimationPage> {
                       scale: LinearScale(min: 0),
                     ),
                   },
-                  transforms: [Sort(compare: (tuple1, tuple2) => tuple1['sold'] - tuple2['sold'])],
+                  transforms: [
+                    Sort(
+                        compare: (tuple1, tuple2) =>
+                            tuple1['sold'] - tuple2['sold'])
+                  ],
                   marks: [
                     IntervalMark(
-                        transition: Transition(duration: Duration(seconds: 1)),
-                        entrance: {MarkEntrance.y},
-                        label: LabelEncode(encoder: (tuple) => Label(tuple['sold'].toString())),
-                        tag: (tuple) => tuple['genre'].toString(),
+                      transition: Transition(duration: Duration(seconds: 1)),
+                      entrance: {MarkEntrance.y},
+                      label: LabelEncode(
+                          encoder: (tuple) => Label(tuple['sold'].toString())),
+                      tag: (tuple) => tuple['genre'].toString(),
                     )
                   ],
                   axes: [
@@ -147,8 +159,6 @@ class AnimationPageState extends State<AnimationPage> {
                   ],
                 ),
               ),
-
-
               Container(
                 padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),
                 child: const Text(
@@ -198,14 +208,15 @@ class AnimationPageState extends State<AnimationPage> {
                       color: ColorEncode(
                           variable: 'name', values: Defaults.colors10),
                       elevation: ElevationEncode(value: 5),
-                      transition: Transition(duration: Duration(seconds: 2), curve: Curves.elasticOut),
+                      transition: Transition(
+                          duration: Duration(seconds: 2),
+                          curve: Curves.elasticOut),
                       entrance: {MarkEntrance.y},
                     )
                   ],
                   coord: PolarCoord(startRadius: 0.15),
                 ),
               ),
-
               Container(
                 padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),
                 child: const Text(
@@ -231,9 +242,8 @@ class AnimationPageState extends State<AnimationPage> {
                       accessor: (List datum) => datum[2] as num,
                     ),
                     '4': Variable(
-                      accessor: (List datum) => datum[4].toString(),
-                      scale: OrdinalScale(values: ['-1', '1'])
-                    ),
+                        accessor: (List datum) => datum[4].toString(),
+                        scale: OrdinalScale(values: ['-1', '1'])),
                   },
                   marks: [
                     PointMark(
@@ -273,7 +283,6 @@ class AnimationPageState extends State<AnimationPage> {
                   coord: PolarCoord(),
                 ),
               ),
-
               Container(
                 padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),
                 child: const Text(
@@ -368,18 +377,27 @@ class AnimationPageState extends State<AnimationPage> {
                   marks: [
                     AreaMark(
                       shape: ShapeEncode(value: BasicAreaShape(smooth: true)),
-                      gradient: GradientEncode(value: LinearGradient(colors: [
+                      gradient: GradientEncode(
+                          value: LinearGradient(colors: [
                         Defaults.colors10.first.withAlpha(80),
                         Defaults.colors10.first.withAlpha(10),
                       ])),
                       transition: Transition(duration: Duration(seconds: 2)),
-                      entrance: {MarkEntrance.x, MarkEntrance.y, MarkEntrance.opacity},
+                      entrance: {
+                        MarkEntrance.x,
+                        MarkEntrance.y,
+                        MarkEntrance.opacity
+                      },
                     ),
                     LineMark(
                       shape: ShapeEncode(value: BasicLineShape(smooth: true)),
                       size: SizeEncode(value: 0.5),
                       transition: Transition(duration: Duration(seconds: 2)),
-                      entrance: {MarkEntrance.x, MarkEntrance.y, MarkEntrance.opacity},
+                      entrance: {
+                        MarkEntrance.x,
+                        MarkEntrance.y,
+                        MarkEntrance.opacity
+                      },
                     ),
                   ],
                   axes: [

diff --git a/example/lib/pages/debug.dart b/example/lib/pages/debug.dart
@@ -20,79 +20,76 @@ class DebugPage extends StatelessWidget {
         child: Center(
           child: Column(
             children: <Widget>[
-
-             buildChart('single point', [Data(0, 5, 1)]),
-            buildChart('2 points in the same sector at different radiuses',
-                [Data(0, 5, 1), Data(0, 6, 2)]),
-            buildChart('2 points with different sector and radius',
-                [Data(0, 5, 1), Data(4, 6, 2)]),
-            buildChart('3 points with different everything',
-                [Data(0, 5, 1), Data(1, 6, 2), Data(2, 7, 3)]),
-            buildChart('3 points with a duplicate',
-                [Data(0, 5, 1), Data(1, 6, 2), Data(1, 6, 2)]),
-
-
+              buildChart('single point', [Data(0, 5, 1)]),
+              buildChart('2 points in the same sector at different radiuses',
+                  [Data(0, 5, 1), Data(0, 6, 2)]),
+              buildChart('2 points with different sector and radius',
+                  [Data(0, 5, 1), Data(4, 6, 2)]),
+              buildChart('3 points with different everything',
+                  [Data(0, 5, 1), Data(1, 6, 2), Data(2, 7, 3)]),
+              buildChart('3 points with a duplicate',
+                  [Data(0, 5, 1), Data(1, 6, 2), Data(1, 6, 2)]),
             ],
           ),
         ),
       ),
     );
   }
 }
+
 Widget buildChart(String name, List<Data> data) => Row(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          Container(width: 300, child: Text(name)),
-          SizedBox(width: 100),
-          Container(
-            width: 150,
-            height: 150,
-            child: Chart(
-              data: data,
-              variables: {
-                'sector': Variable(
-                  accessor: (Data d) => d.sector.toString(),
-                  scale: OrdinalScale(
-                    values: List<int>.generate(10, (i) => i++)
-                        .map((s) => s.toString())
-                        .toList(),
-                  ),
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Container(width: 300, child: Text(name)),
+        SizedBox(width: 100),
+        Container(
+          width: 150,
+          height: 150,
+          child: Chart(
+            data: data,
+            variables: {
+              'sector': Variable(
+                accessor: (Data d) => d.sector.toString(),
+                scale: OrdinalScale(
+                  values: List<int>.generate(10, (i) => i++)
+                      .map((s) => s.toString())
+                      .toList(),
                 ),
-                'radius': Variable(
-                  accessor: (Data d) => d.radius,
-                  scale: LinearScale(
-                    min: 0,
-                    max: 10,
-                  ),
+              ),
+              'radius': Variable(
+                accessor: (Data d) => d.radius,
+                scale: LinearScale(
+                  min: 0,
+                  max: 10,
                 ),
-                'value': Variable(
-                  accessor: (Data d) => d.value,
-                  scale: LinearScale(
-                    min: 0,
-                    max: 10,
-                  ),
+              ),
+              'value': Variable(
+                accessor: (Data d) => d.value,
+                scale: LinearScale(
+                  min: 0,
+                  max: 10,
                 ),
-              },
-              marks: [
-                PolygonMark(
-                  shape: ShapeEncode(value: HeatmapShape(sector: true, tileCounts: [10, 10])),
-                  color: ColorEncode(
-                    variable: 'value',
-                    values: [Colors.blue, Colors.red],
-                  ),
-                )
-              ],
-              coord: PolarCoord(),
-              axes: [
-                Defaults.circularAxis,
-                Defaults.radialAxis,
-              ],
-            ),
-          ),
+              ),
+            },
+            marks: [
+              PolygonMark(
+                shape: ShapeEncode(
+                    value: HeatmapShape(sector: true, tileCounts: [10, 10])),
+                color: ColorEncode(
+                  variable: 'value',
+                  values: [Colors.blue, Colors.red],
+                ),
+              )
+            ],
+            coord: PolarCoord(),
+            axes: [
+              Defaults.circularAxis,
+              Defaults.radialAxis,
             ],
-
-          );
-
+          ),
+        ),
+      ],
+    );
 
 class Data {
   final int sector;

diff --git a/example/lib/pages/polygon_custom.dart b/example/lib/pages/polygon_custom.dart
@@ -852,10 +852,10 @@ class DodgeSizeModifier extends Modifier {
           index: attributes.index,
           tag: attributes.tag,
           position: oldPosition
-            .map(
-              (point) => Offset(point.dx + accumulated + bias, point.dy),
-            )
-            .toList(),
+              .map(
+                (point) => Offset(point.dx + accumulated + bias, point.dy),
+              )
+              .toList(),
           shape: attributes.shape,
           color: attributes.color,
           gradient: attributes.gradient,

diff --git a/lib/graphic.dart b/lib/graphic.dart
@@ -111,7 +111,7 @@
 ///
 /// They include [Axis] specified by [Chart.axes], [Tooltip] specified by [Chart.tooltip],
 /// [Crosshair] specified by [Chart.crosshair], and [Annotation]s specified by [Chart.annotations],
-/// 
+///
 /// ## Animation
 /// Marks can specify transition animation by [Mark.transition] on entrance or changed.
 /// [Mark.entrance] defines which encode attributes are zero at the begining of

diff --git a/lib/src/common/builtin_layers.dart b/lib/src/common/builtin_layers.dart
@@ -1,5 +1,5 @@
 /// Built-in layer orders of chart components.
-/// 
+///
 /// It works when components have same layer.
 abstract class BuiltinLayers {
   static const regionBackground = 0;

diff --git a/lib/src/dataflow/tuple.dart b/lib/src/dataflow/tuple.dart
@@ -82,16 +82,16 @@ class Attributes {
   ///
   /// This method is mainly used for [Modifier]s.
   Attributes withPosition(List<Offset> p) => Attributes(
-    index: index,
-    tag: tag,
-    position: p,
-    shape: shape,
-    color: color,
-    gradient: gradient,
-    elevation: elevation,
-    label: label,
-    size: size,
-  );
+        index: index,
+        tag: tag,
+        position: p,
+        shape: shape,
+        color: color,
+        gradient: gradient,
+        elevation: elevation,
+        label: label,
+        size: size,
+      );
 
   /// Returns the original state of an item attributes in animation according to
   /// [entrance] type.
@@ -102,7 +102,9 @@ class Attributes {
       rst = Attributes(
         index: rst.index,
         tag: rst.tag,
-        position: rst.position.map((p) => Offset(p.dx.isFinite ? 0 : p.dx, p.dy)).toList(),
+        position: rst.position
+            .map((p) => Offset(p.dx.isFinite ? 0 : p.dx, p.dy))
+            .toList(),
         shape: rst.shape,
         color: rst.color,
         gradient: rst.gradient,
@@ -116,7 +118,9 @@ class Attributes {
       rst = Attributes(
         index: rst.index,
         tag: rst.tag,
-        position: rst.position.map((p) => Offset(p.dx, p.dy.isFinite ? 0 : p.dy)).toList(),
+        position: rst.position
+            .map((p) => Offset(p.dx, p.dy.isFinite ? 0 : p.dy))
+            .toList(),
         shape: rst.shape,
         color: rst.color,
         gradient: rst.gradient,

diff --git a/lib/src/graffiti/element/arc.dart b/lib/src/graffiti/element/arc.dart
@@ -7,7 +7,7 @@ import 'segment/move.dart';
 import 'segment/arc.dart';
 
 /// Gets the arc point by [angle] on an [oval].
-/// 
+///
 /// The algrithom is from https://blog.csdn.net/chenlu5201314/article/details/99678398
 Offset getArcPoint(Rect oval, double angle) {
   final a = oval.width / 2;