@antv/thumbnails NPM

AntV/Thumbnails

Thumbnail images for different chart types from CKB.

Usage

Use as Data in Object

import Thumbnails from '@antv/thumbnails';

if (Thumbnails.pie_chart) {
  const { id, name, svgCode } = Thumbnails.pie_chart;
  console.log(id, name, svgCode);
}
});

NOTICE: You may have to import lower_case chart id in tools like Codesandbox or riddle. See issue#12.

import { BAR_CHART } from '@antv/thumbnails';

const { id, name, svgCode } = BAR_CHART;
console.log(id, name, svgCode);

The ChartIDs are listed in: AVA/CKB.

Use as React Component

import Thumbnails, { Thumbnail, PIE_CHART } from '@antv/thumbnails';

// Thumbnail is the React Component
// ...

  // define a chart id from 'AVA/CKB'
  <Thumbnail chart={'pie_chart'} />
  
  // get the svg code from Thumbnails object
  <Thumbnail svg={Thumbnails.pie_chart.svgCode} />

  // get the svg code from specific chart thumbnail object
  <Thumbnail svg={PIE_CHART.svgCode} />

  // with other img HTML attributes
  <Thumbnail chart={'pie_chart'} alt={'pie'} width={80} />

For example:

import * as React from 'react';

import Thumbnails, { Thumbnail } from '@antv/thumbnails';

class App extends React.Component<{}> {
  constructor(props: {}) {
    super(props);
  }

  public render() {
    return (
      <div className="symbols">
        {Object.keys(Thumbnails).map(chart => {
          const { svgCode, name } = Thumbnails[chart];
          return (
            <div className="symbol-img-container">
              <Thumbnail svg={svgCode} alt={name} width={200} />
            </div>
          );
        })}
      </div>
    );
  }
}

export default App;