Merge pull request #52 from VisActor/release/0.3.2

[Auto release] release 0.3.2

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -59,7 +59,7 @@ body:
         2. What's the spec of view
         3. User interactions before the error happens.
     validations:
-      required: true
+      required: false
 
   - type: textarea
     attributes:

.github/ISSUE_TEMPLATE/feaure_request.yml

@@ -35,4 +35,4 @@ body:
       description: Describe how you propose to solve the problem and provide code samples of how the API would work once implemented. Note that you can use [Markdown](https://docs.github.com/en/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax) to format your code blocks.
 
     validations:
-      required: true
+      required: false

.gitignore

@@ -115,4 +115,6 @@ common/scripts/pre-commit
 
 docs/site/examples/**.js
 docs/site/tutorials/**.js
-docs/site/api/**.js
+docs/site/api/**.js
+docs/site/examples/preview-image
+docs/site/examples/preview-fail.json

README.md

@@ -20,8 +20,8 @@ VGrammar, not only generate charts, but also provide data visualization tools.
   <a href="">Cross-Platform</a>
 </p>
 
-![image test](https://github.com/visactor/vchart/actions/workflows/bug-server.yml/badge.svg)
-![unit test](https://github.com/visactor/vchart/actions/workflows/unit-test.yml/badge.svg)
+![image test](https://github.com/visactor/vchart/actions/workflows/bug-server.yml/badge.svg?event=push)
+![unit test](https://github.com/visactor/vchart/actions/workflows/unit-test.yml/badge.svg?event=push)
 [![npm Version](https://img.shields.io/npm/v/@visactor/vgrammar.svg)](https://www.npmjs.com/package/@visactor/vgrammar)
 [![npm Download](https://img.shields.io/npm/dm/@visactor/vgrammar.svg)](https://www.npmjs.com/package/@visactor/vgrammar)
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vgrammar/blob/main/LICENSE)
@@ -74,120 +74,80 @@ yarn add @visactor/vgrammar
 import { View } from '@visactor/vgrammar';
 
 const spec = {
-  padding: { top: 5, right: 5, bottom: 30, left: 60 },
   data: [
     {
       id: 'table',
       values: [
         {
-          name: 'A',
-          value: 214480
+          value: 3676,
+          name: ' ~ 29'
         },
         {
-          name: 'B',
-          value: 155506
+          value: 3872,
+          name: '30 ~ 39'
         },
         {
-          name: 'C',
-          value: 100764
+          value: 1668,
+          name: '40 ~ 49'
         },
         {
-          name: 'D',
-          value: 92715
+          value: 610,
+          name: '50 ~'
+        }
+      ]
+    },
+    {
+      id: 'pie',
+      source: 'table',
+      transform: [
+        {
+          type: 'pie',
+          field: 'value',
+          asStartAngle: 'startAngle',
+          asEndAngle: 'endAngle'
         }
       ]
     }
   ],
+
   scales: [
     {
-      id: 'xscale',
-      type: 'band',
+      id: 'colorScale',
+      type: 'ordinal',
       domain: { data: 'table', field: 'name' },
-      dependency: ['viewBox'],
-      range: (scale, params) => {
-        return [params.viewBox.x1, params.viewBox.x2];
-      },
-      padding: 0.05,
-      round: true
-    },
-    {
-      id: 'yscale',
-      type: 'linear',
-      domain: { data: 'table', field: 'value' },
-      dependency: ['viewBox'],
-      range: (scale, params) => {
-        return [params.viewBox.y2, params.viewBox.y1];
-      },
-      nice: true
+      range: [
+        '#6690F2',
+        '#70D6A3',
+        '#B4E6E2',
+        '#63B5FC',
+        '#FF8F62',
+        '#FFDC83',
+        '#BCC5FD',
+        '#A29BFE',
+        '#63C4C7',
+        '#F68484'
+      ]
     }
   ],
 
   marks: [
     {
-      type: 'component',
-      componentType: 'axis',
-      scale: 'xscale',
-      tickCount: -1,
-      dependency: ['viewBox'],
-      encode: {
-        update: (scale, elment, params) => {
-          return {
-            x: params.viewBox.x1,
-            y: params.viewBox.y2,
-            start: { x: 0, y: 0 },
-            end: { x: params.viewBox.width(), y: 0 }
-          };
-        }
-      }
-    },
-    {
-      type: 'component',
-      componentType: 'axis',
-      scale: 'yscale',
-      dependency: ['viewBox'],
-      encode: {
-        update: (scale, elment, params) => {
-          return {
-            x: params.viewBox.x1,
-            y: params.viewBox.y1,
-            start: { x: 0, y: params.viewBox.height() },
-            end: { x: 0, y: 0 },
-            verticalFactor: -1
-          };
-        }
-      }
-    },
-    {
-      type: 'component',
-      componentType: 'crosshair',
-      scale: 'xscale',
-      crosshairShape: 'rect',
-      crosshairType: 'x',
-      dependency: ['viewBox'],
+      type: 'arc',
+      from: { data: 'pie' },
+      dependency: ['viewBox', 'colorScale'],
       encode: {
-        update: (scale, elment, params) => {
+        update: (datum, element, params) => {
+          const viewBox = params.viewBox;
+          const maxR = Math.min(viewBox.width() / 2, viewBox.height() / 2);
           return {
-            start: { y: params.viewBox.y1 },
-            rectStyle: { height: params.viewBox.height() }
+            x: viewBox.x1 + viewBox.width() / 2,
+            y: viewBox.y1 + viewBox.height() / 2,
+            startAngle: datum.startAngle,
+            endAngle: datum.endAngle,
+            innerRadius: 100,
+            outerRadius: maxR,
+            fill: params.colorScale.scale(datum.name)
           };
-        }
-      }
-    },
-    {
-      type: 'rect',
-      from: { data: 'table' },
-      encode: {
-        update: {
-          x: { scale: 'xscale', field: 'name' },
-          width: { scale: 'xscale', band: 1 },
-          y: { scale: 'yscale', field: 'value' },
-          y1: {
-            callback: (datum, element, params) => {
-              return params.yscale.scale(params.yscale.domain()[0]);
-            },
-            dependency: ['yscale']
-          },
-          fill: '#6690F2'
         },
         hover: {
           fill: 'red'
@@ -199,8 +159,6 @@ const spec = {
 
 const vGrammarView = new View({
   autoFit: true,
-  width: spec.width,
-  height: spec.height,
   container: 'chart',
   hover: true
 });