@antv/thumbnails
Thumbnails of Chart Types.
Last updated 7 days ago by neoddish .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @antv/thumbnails 
SYNC missed versions from official npm registry.

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;

Development

npm install
npm run build
npm run extractsvg
npm run readmepreview

Current Tags

  • 1.2.0                                ...           latest (7 days ago)

12 Versions

  • 1.2.0                                ...           7 days ago
  • 1.1.1                                ...           7 days ago
  • 1.1.0                                ...           7 days ago
  • 1.0.2                                ...           8 days ago
  • 1.0.1                                ...           8 days ago
  • 1.0.0                                ...           8 days ago
  • 0.3.0                                ...           2 months ago
  • 0.2.1-alpha.0                                ...           a year ago
  • 0.2.0                                ...           a year ago
  • 0.1.2                                ...           a year ago
  • 0.1.1                                ...           a year ago
  • 0.1.0                                ...           a year ago

Copyright 2014 - 2016 © taobao.org |