fix(types): axis for composition

__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,82 @@
+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('x', 'name')
+    .encode('y', 100)
+    .encode('size', 52)
+    .scale('y', { zero: true })
+    .axis(false)
+    .style('fill', 'rgba(232, 232, 232, 1)')
+    .animate(false);
+
+  view
+    .interval()
+    .encode('x', 'name')
+    .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';

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 = {