atom-viz v0.0.32

Atom Viz Web Components

Welcome to Atom Viz Web Components!

Installing

These components leverage basic HTML, so they can be imported into any framework. They do not leverage shadow dom -- so the styles can be updated directly however you style your page already -- anything from using CSS selectors or a styled components wrapper.

There are two strategies we recommend for leveraging these web components.

Script tag

• Put a script tag similar to this <script type='module' src='https://unpkg.com/atom-viz@0.0.25/dist/atom-viz.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install atom-viz --save
• Put a script tag similar to this <script type='module' src='node_modules/atom-viz/dist/atom-viz.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Importing

Typescript

If you are using typescript you have to manually declare the global typings so they are accepted. You can do that with the following declaration at your App.tsx main file.

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'atom-price-line': any;
      'atom-price-line-fetched': any;
      'atom-price-line-demo': any;
      'atom-streaming-price': any;
    }
  }
}

React

React just requires installing this library and importing it at the top of the file in which you plan to use the components. Here is a full example:

import React from 'react';
import 'atom-viz';
import styled from 'styled-components';

const WebComponentExample = () => {
  return (
    <Container>
      <h1>Example Asset Page</h1>
      <WrapperStyling>
        <atom-price-line-demo
          symbol={'AAPL'}
          api-key={process.env.REACT_APP_ATOM_API_KEY}
        />
        <atom-streaming-price 
          symbol={'AAPL'}
          api-key={process.env.REACT_APP_ATOM_API_KEY}
        />
      </WrapperStyling>
    </Container>
  );
};

export default React.memo(WebComponentExample);

const Container = styled.div`
  margin: 2em;
`;

const WrapperStyling = styled.div`
  .price-line {
    stroke: white;
  }
`;