fix(types): axis for composition (#4851)

* fix(types): axis for composition

* docs(site): update apple-activity

__tests__/integration/api-chart-change-data-facet.spec.ts

@@ -0,0 +1,25 @@
+import { chartChangeDataFacet as render } from '../plots/api/chart-change-data-facet';
+import { createNodeGCanvas } from './utils/createNodeGCanvas';
+import { sleep } from './utils/sleep';
+import './utils/useSnapshotMatchers';
+
+describe('mark.changeSize', () => {
+  const canvas = createNodeGCanvas(640, 480);
+
+  it('mark.changeSize(width, height) should rerender expected chart', async () => {
+    const { finished, button, refreshed } = render({
+      canvas,
+      container: document.createElement('div'),
+    });
+    await finished;
+    button.dispatchEvent(new CustomEvent('click'));
+    await refreshed;
+    const dir = `${__dirname}/snapshots/api`;
+    await sleep(20);
+    await expect(canvas).toMatchCanvasSnapshot(dir, render.name);
+  });
+
+  afterAll(() => {
+    canvas?.destroy();
+  });
+});

__tests__/plots/api/chart-change-data-facet.ts

@@ -0,0 +1,80 @@
+import { Chart } from '../../../src';
+
+export function chartChangeDataFacet(context) {
+  const { container, canvas } = context;
+
+  const button = document.createElement('button');
+  button.innerText = 'Update Data';
+  button.style.display = 'block';
+  container.appendChild(button);
+
+  const div = document.createElement('div');
+  container.appendChild(div);
+
+  const chart = new Chart({ theme: 'classic', container: div, canvas });
+
+  const view = chart
+    .facetRect()
+    .data([
+      { name: 'CPU', percent: 27, color: 'rgba(90, 132, 226, 1)' },
+      { name: '内存', percent: 81, color: 'rgba(250, 57, 57, 1)' },
+      { name: '硬盘', percent: 68, color: 'rgba(253, 192, 45, 1)' },
+    ])
+    .encode('x', 'name')
+    .axis(false)
+    .legend(false)
+    .view()
+    .attr('frame', false)
+    .coordinate({ type: 'radial', innerRadius: 0.7, outerRadius: 0.95 });
+
+  view
+    .interval()
+    .encode('y', 100)
+    .encode('size', 52)
+    .scale('y', { zero: true })
+    .axis(false)
+    .style('fill', 'rgba(232, 232, 232, 1)')
+    .animate(false);
+
+  view
+    .interval()
+    .encode('y', 'percent')
+    .encode('color', 'color')
+    .encode('size', 80)
+    .scale('color', { type: 'identity' })
+    .tooltip({ name: '已使用', channel: 'y' })
+    .axis(false)
+    .style('radius', 26)
+    .style('shadowColor', 'color')
+    .style('shadowBlur', 10)
+    .style('shadowOffsetX', -1)
+    .style('shadowOffsetY', -1)
+    .animate('enter', { type: 'waveIn', duration: 1000 });
+
+  view
+    .text()
+    .encode('text', (d) => `${d.name} ${d.percent}%`)
+    .style('textAlign', 'center')
+    .style('textBaseline', 'middle')
+    .style('fontSize', 15)
+    .style('color', 'rgba(74, 74, 74, 1)')
+    .style('x', '50%')
+    .style('y', '50%');
+
+  const finished = chart.render();
+
+  let resolve;
+  const refreshed = new Promise((r) => (resolve = r));
+
+  button.onclick = () => {
+    chart
+      .changeData([
+        { name: 'CPU', percent: 40, color: 'rgba(90, 132, 226, 1)' },
+        { name: '内存', percent: 60, color: 'rgba(250, 57, 57, 1)' },
+        { name: '硬盘', percent: 20, color: 'rgba(253, 192, 45, 1)' },
+      ])
+      ?.then(resolve);
+  };
+
+  return { chart, button, finished, refreshed };
+}

__tests__/plots/api/index.ts

@@ -12,3 +12,4 @@ export { chartOptions } from './chart-options';
 export { viewFacetCircle } from './view-facetCircle';
 export { chartEmitLegendFilter } from './chart-emit-legend-filter';
 export { chartChangeSizePolar } from './chart-change-size-polar';
+export { chartChangeDataFacet } from './chart-change-data-facet';

site/examples/general/radial/demo/apple-activity.ts

@@ -7,74 +7,63 @@ const chart = new Chart({
   height: 244,
 });
 
-const spaceLayer = chart.spaceLayer().data([
-  {
-    name: 'activity1',
-    percent: 2370,
-    color: '#1ad5de',
-    icon: 'https://gw.alipayobjects.com/zos/antfincdn/ck11Y6aRrz/shangjiantou.png',
-  },
-  {
-    name: 'activity2',
-    percent: 800,
-    color: '#a0ff03',
-    icon: 'https://gw.alipayobjects.com/zos/antfincdn/zY2JB7hhrO/shuangjiantou.png',
-  },
-  {
-    name: 'activity3',
-    percent: 650,
-    color: '#e90b3a',
-    icon: 'https://gw.alipayobjects.com/zos/antfincdn/%24qBxSxdK05/jiantou.png',
-  },
-]);
+chart
+  .data([
+    {
+      name: 'activity1',
+      percent: 0.6,
+      color: '#1ad5de',
+      icon: 'https://gw.alipayobjects.com/zos/antfincdn/ck11Y6aRrz/shangjiantou.png',
+    },
+    {
+      name: 'activity2',
+      percent: 0.2,
+      color: '#a0ff03',
+      icon: 'https://gw.alipayobjects.com/zos/antfincdn/zY2JB7hhrO/shuangjiantou.png',
+    },
+    {
+      name: 'activity3',
+      percent: 0.3,
+      color: '#e90b3a',
+      icon: 'https://gw.alipayobjects.com/zos/antfincdn/%24qBxSxdK05/jiantou.png',
+    },
+  ])
+  .coordinate({ type: 'radial', innerRadius: 0.2 });
 
-spaceLayer
-  .view()
-  .coordinate({ type: 'radial', innerRadius: 0.2 })
+chart
   .interval()
   .encode('x', 'name')
   .encode('y', 1)
   .encode('size', 52)
   .encode('color', 'color')
   .scale('color', { type: 'identity' })
-  .axis('x', false)
-  .axis('y', false)
   .style('fillOpacity', 0.25)
-  .animate('enter', { type: 'waveIn', duration: 400 });
+  .animate(false);
 
-spaceLayer
-  .view()
-  .coordinate({ type: 'radial', innerRadius: 0.2 })
-  .axis('x', false)
-  .axis('y', false)
-  .scale('color', { type: 'identity' })
-  .scale('y', { domain: [0, 3000] })
-  .call((node) =>
-    node
-      .interval()
-      .encode('x', 'name')
-      .encode('y', 'percent')
-      .encode('color', (d) => d.color)
-      .encode('size', 52)
-      .style('radius', 26)
-      .style('shadowColor', 'rgba(0,0,0,0.45)')
-      .style('shadowBlur', 20)
-      .style('shadowOffsetX', -2)
-      .style('shadowOffsetY', -5)
-      .animate('enter', {
-        type: 'waveIn',
-        easing: 'easing-out-bounce',
-        duration: 1000,
-      }),
-  )
-  .call((node) =>
-    node
-      .image()
-      .encode('x', 'name')
-      .encode('y', 0)
-      .encode('src', (d) => d.icon)
-      .encode('size', 12)
-      .style('transform', 'translateX(10)'),
-  );
+chart
+  .interval()
+  .encode('x', 'name')
+  .encode('y', 'percent')
+  .encode('color', 'color')
+  .encode('size', 52)
+  .style('radius', 26)
+  .style('shadowColor', 'rgba(0,0,0,0.45)')
+  .style('shadowBlur', 20)
+  .style('shadowOffsetX', -2)
+  .style('shadowOffsetY', -5)
+  .axis(false)
+  .animate('enter', {
+    type: 'waveIn',
+    easing: 'easing-out-bounce',
+    duration: 1000,
+  });
+
+chart
+  .image()
+  .encode('x', 'name')
+  .encode('y', 0)
+  .encode('src', (d) => d.icon)
+  .encode('size', 12)
+  .style('transform', 'translateX(10)');
 
 chart.render();

src/spec/composition.ts

@@ -62,6 +62,7 @@ export type ViewComposition = {
   theme?: Theme;
   children?: Mark[];
   scale?: Record<string, Scale>;
+  frame?: boolean;
   labelTransform?: LabelTransform[];
   // @todo
   axis?: Record<string, any>;
@@ -141,9 +142,9 @@ export type FacetRectComposition = {
   shareSize?: boolean;
   children?: Node[] | ((facet: FacetContext) => Node);
   // @todo
-  axis?: Record<string, any>;
+  axis?: Record<string, any> | boolean;
   // @todo
-  legend?: Record<string, any>;
+  legend?: Record<string, any> | boolean;
 };
 
 export type RepeatMatrixComposition = {
@@ -172,9 +173,9 @@ export type RepeatMatrixComposition = {
     color?: Scale;
   };
   // @todo
-  axis?: Record<string, any>;
+  axis?: Record<string, any> | boolean;
   // @todo
-  legend?: Record<string, any>;
+  legend?: Record<string, any> | boolean;
   children?: Node[] | ((facet: FacetContext) => Node);
 };
 
@@ -203,9 +204,9 @@ export type FacetCircleComposition = {
   };
   children?: Node[] | ((facet: FacetContext) => Node);
   // @todo
-  axis?: Record<string, any>;
+  axis?: Record<string, any> | boolean;
   // @todo
-  legend?: Record<string, any>;
+  legend?: Record<string, any> | boolean;
 };
 
 export type TimingKeyframeComposition = {