Merge pull request #2 from ant-mini-program/feat-basic

feat: basic graphics

Author: Phieo

README.md

@@ -0,0 +1 @@
+App({});

app.acss

@@ -0,0 +1,29 @@
+{
+  "pages": [
+    "examples/index/index",
+    "examples/line/index",
+    "examples/area/index",
+    "examples/dodge-area/index",
+    "examples/stack-area/index",
+    "examples/column/index",
+    "examples/dodge/index",
+    "examples/stack-column/index",
+    "examples/bar/index",
+    "examples/dodge-bar/index",
+    "examples/stack-bar/index",
+    "examples/radar/index",
+    "examples/radar-fund/index",
+    "examples/pie/index",
+    "examples/radial-bar/index",
+    "examples/labelline-pie/index",
+    "examples/ring/index",
+    "examples/rose/index",
+    "examples/scatter/index",
+    "examples/bubble/index",
+    "examples/k/index",
+    "examples/timeshare/index"
+  ],
+  "window": {
+    "defaultTitle": "小程序图表组件库"
+  }
+}

app.js

@@ -0,0 +1,9 @@
+.am-mc-area{
+  width:100%;
+  height:100%;
+}
+
+canvas{
+  width:100%;
+  height:100%;
+}

app.json

@@ -0,0 +1,10 @@
+<view class="am-mc-area">
+  <canvas
+    id="am-mc-area-{{$id}}"
+    height="{{height}}"
+    width="{{width}}"
+    onTouchStart="touchStart"
+    onTouchMove="touchMove"
+    onTouchEnd="touchEnd"
+  />
+</view>

components/area/index.acss

@@ -0,0 +1,144 @@
+import F2 from '@antv/my-f2';
+import methods from '../mixins/methods';
+import util from '../util';
+
+Component({
+  mixins: [methods],
+  props: {
+    categories: [],
+    series: [],
+    xAxis: {
+      tickCount: 3,
+    },
+    yAxis: {
+      tickCount: 3,
+    },
+    tooltip: false,
+    legend: false,
+  },
+  didMount() {
+    my.call('getStartupParams', {}, (result) => {
+      util.tracert('area', result.appId, result.url);
+    });
+
+    const id = `am-mc-area-${this.$id}`;
+    const ctx = my.createCanvasContext(id);
+    const canvas = this.canvas = new F2.Renderer(ctx);
+
+    const pixelRatio = my.getSystemInfoSync().pixelRatio;
+    ctx.scale(pixelRatio, pixelRatio);
+
+    my.createSelectorQuery()
+      .select(`#${id}`)
+      .boundingClientRect()
+      .exec(res => {
+        if(!res || !res.length) {
+          return;
+        }
+        const {width, height} = res[0];
+        this.setData({
+          width: width * pixelRatio,
+          height: height * pixelRatio,
+        });
+        const { padding, appendPadding } = this.props;
+
+        this.chart = new F2.Chart({
+          el: canvas,
+          width,
+          height,
+          padding,
+          appendPadding,
+        });
+      });
+  },
+  didUpdate() {
+    const { categories, series, xAxis, yAxis, tooltip, legend, adjust } = this.props;
+
+    const chart = this.chart;
+    chart.clear();
+
+    let data = [];
+    if(series.length === 1) {
+      data = series[0].data.map((item, i) => {
+        return {
+          key: categories[i],
+          value: item,
+        }
+      });
+    }
+    else if(series.length > 1) {
+      series.forEach(kind => {
+        data = data.concat(kind.data.map((item, i) => {
+          return {
+            key: categories[i],
+            value: item,
+            type: kind.type,
+          };
+        }));
+      });
+    }
+    chart.source(data);
+
+    if(xAxis) {
+      xAxis.label = util.label;
+      chart.scale('key', util.scale(xAxis));
+      chart.axis('key', util.axis(xAxis));
+    }
+    if(yAxis) {
+      chart.scale('value', util.scale(yAxis));
+      chart.axis('value', util.axis(yAxis));
+    }
+    chart.tooltip(tooltip);
+    chart.legend(legend);
+
+    const style = {};
+    series.forEach(kind => {
+      style[kind.type] = kind.style;
+    });
+    const color = {};
+    series.forEach(kind => {
+      color[kind.type] = kind.color;
+    });
+
+    if(series.length === 1) {
+      chart.area().position('key*value').color('type', type => {
+        return color[type];
+      }).adjust(adjust);
+      chart.line().position('key*value').color('type', type => {
+        return color[type];
+      }).shape('type', type => {
+        return style[type] || 'line';
+      }).adjust(adjust);
+      if(series[0].point) {
+        chart.point().position('key*value').style(series[0].point);
+      }
+    }
+    else if(series.length > 1) {
+      chart.area().position('key*value').color('type', type => {
+        return color[type];
+      }).adjust(adjust);
+      chart.line().position('key*value').color('type', type => {
+        return color[type];
+      }).shape('type', type => {
+        return style[type] || 'line';
+      }).adjust(adjust);
+      let pointType = [];
+      let pointStyle;
+      series.forEach(kind => {
+        if(kind.point) {
+          pointType.push(kind.type);
+          pointStyle = kind.point;
+        }
+      });
+      if(pointType.length) {
+        chart.point().position('key*value').color('type').size('type', v => {
+          if(pointType.indexOf(v) === -1) {
+            return 0;
+          }
+        }).style(pointStyle);
+      }
+    }
+
+    chart.render();
+  },
+});

components/area/index.axml

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

components/area/index.js

@@ -0,0 +1,9 @@
+.am-mc-bubble{
+  width:100%;
+  height:100%;
+}
+
+canvas{
+  width:100%;
+  height:100%;
+}

components/area/index.json

@@ -0,0 +1,10 @@
+<view class="am-mc-bubble">
+  <canvas
+    id="am-mc-bubble-{{$id}}"
+    height="{{height}}"
+    width="{{width}}"
+    onTouchStart="touchStart"
+    onTouchMove="touchMove"
+    onTouchEnd="touchEnd"
+  />
+</view>